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

最新推荐文章于 2025-03-29 15:30:00 发布

转载最新推荐文章于 2025-03-29 15:30:00 发布 · 319 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lhl66/p/9195787.html

文章标签：

#javascript #ViewUI

本文详细介绍了Vue.js中路由守卫的使用方法，包括beforeEach和afterEach钩子函数的应用场景，展示了如何通过路由守卫实现页面跳转前后的权限验证及页面标题更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先构建一个测试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