vue路由導航守衛及前置后置鈎子函數參數詳解

首先構建一個測試demo如下圖:

接着來探討路由配置界面

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

const router = new Router({
  routes: [{
    path: '/',
    name: 'HelloWorld',
    component: resolve => require(['@/components/HelloWorld'], resolve)
  }, {
    path: '/login',
    name: 'login',
    component: resolve => require(['@/components/login'], resolve)
  }, {
    path: '/navmenu',
    name: 'navMenu',
    component: resolve => require(['@/components/navMenu'], resolve),
    meta: {
      title: '查看鈎子beforeEach作用',
      index: 2,
      login: true
    }
  }]
})

// 進入路由前方法勾子
router.beforeEach((to, from, next) => {
  console.log(to, '前置第一個參數')
  console.log(from, '前置第二個參數')
  console.log(next, '前置第三個參數')
  /
    to 目標路由
    from 源路由
    next 跳轉到下一個路由
  */
  if (to.meta.login) {
    // 如果需要，則跳轉到登錄頁
    next('/login');
  } else {
    // 如果不需要，則直接跳轉到對應路由
    next();
  }
});
// 進入路由后方法勾子
router.afterEach((to, from) => {
  console.log(to, '后置第一個參數')
  console.log(from, '后置第二個參數')
  /*
    to 目標路由
    from 源路由
  */
  if (to.meta.title) {
    console.log(to.meta.title);
  } else {
    console.log('暫無名稱');
  }
});


export default router

 可以見到控制台

當點擊事件發生后（也就是第一個頁面向第二個頁面跳轉后）

 

由此看出從第一個頁面點擊跳轉后觸發了兩次前置鈎子函數並且點擊后校驗是否需要登入直接進入login頁面可用於后台管理權限控制頁面是否需要登入權限，一次后置鈎子函數；可以清楚看到里面的參數變化；