vue3中 beforeEach 使用

最新推荐文章于 2023-12-14 21:50:51 发布

鲤忆

最新推荐文章于 2023-12-14 21:50:51 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_62487693/article/details/129413309

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

在Vue应用中，通过创建permission.js文件并导入router模块，实现了全局的路由拦截。beforeEach函数用于在每次路由切换前进行处理，如权限检查，而afterEach则在路由组件加载完成后执行，可用于额外的后期处理。在main.js中引入permission.js以激活这些功能。

摘要由CSDN通过智能技术生成

1.创建permission.js文件

import router from './router';
/**
 * beforeEach() 
 * 作用：全局拦截所有路由，在每次修改路由地址之前触发回调函数
 * 参数：回调函数（副作用函数）
 *  回参一：变化后路由地址信息。当前展示的路由地址信息
 *  回参二：上一个路由地址信息
 *  回参三：next() 管道函数，表示进入下一个钩子函数
 *         next() 可以修改url地址。
 */
router.beforeEach((to, from, next) => {
    // console.log(to);
    // console.log(from);
    console.log('before each run');
    next()
})

/**
 * 
 */
router.afterEach((to, from, failure) => {
    console.log('after each，路由组件加载完毕以后执行');
})

2.在main.js文件中导入