路由鉤子，即導航鉤子，其實就是路由攔截器，vue-router一共有三類：

  1. 全局鉤子：最常用

  2. 路由單獨鉤子

  3. 組件內鉤子

1、全局鉤子

在src/router/index.js中使用，代碼如下：

//?定義路由配置const?router?=?new?VueRouter({?...?})//?全局路由攔截-進入頁面前執行router.beforeEach((to,?from,?next)?=>?{//?這里可以加入全局登陸判斷//?繼續執行next();});//?全局后置鉤子-常用于結束動畫等router.afterEach(()?=>?{//不接受next});export?default?router;

每個鉤子方法接收三個參數：
to: Route : 即將要進入的目標 [路由對象]
from: Route : 當前導航正要離開的路由
next: Function : 繼續執行函數

  • next()：繼續執行

  • next(false)：中斷當前的導航。

  • next(‘/‘) 或 next({ path: ‘/‘ })：跳轉新頁面，常用于登陸失效跳轉登陸

2、路由單獨鉤子

使用：在路由配置中單獨加入鉤子，在src/router/index.js中使用，代碼如下：

{path:'/home/one',?//?子頁面1component:?One,//?路由內鉤子beforeEnter:?(to,?from,?next)?=>?{console.log('進入前執行');next();}}

3、組件內鉤子

使用：在路由組件內定義鉤子函數：

  • beforeRouteEnter：進入頁面前調用

  • beforeRouteUpdate (2.2 新增)：頁面路由改變時調用，一般需要帶參數

  • beforeRouteLeave：離開頁面調用

任意找一頁面，編寫如下代碼：

<script>export?default?{name:?'Two',data?()?{return?{msg:?'Hi,?I?am?Two?Page!'}},//?進入頁面前調用beforeRouteEnter(to,?from,?next)?{console.log('進入enter路由鉤子')next()},//?離開頁面調用beforeRouteLeave(to,from,?next){console.log('進入leave路由鉤子')next()},//?頁面路由改變時調用beforeRouteUpdate(to,?from,?next)?{console.log('進入update路由鉤子')console.log(to.params.id)next()}}</script>