vue路由导航守卫及前置后置钩子函数参数详解

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