全局前置、后置路由守卫

router/index.js

import Vue from 'vue'; import VueRouter from 'vue-router'; import List from '@/pages/List' Vue.use(VueRouter); const router = new VueRouter({ routes: [{ path: '/list', component: List, meta: { // 路由元数据 title: '列表' ... // 可自定义配置参数 } }] }); // 前置：在路由切换之前调用 router.beforeEach((to, from, next) => {}); // 后置：在路由切换成功之后调用 router.afterEach((to, from) => {}); export default router;

说明 ① router.beforeEach()是全局前置路由守卫 ② router.afterEach()是全局后置路由守卫 ③ to：目的地路由信息 ④ from: 出发地路由信息 ⑤ next：是个函数，只有调用next()，路由器才可继续跳转，不调用直接拦截 ⑥ routes中的meta配置项，可配置一些自定义的参数

独享路由守卫

router/index.js

import Vue from 'vue'; import VueRouter from 'vue-router'; import List from '@/pages/List'; import Detail from '@/pages/Detail'; Vue.use(VueRouter); export default new VueRouter({ routes: [{ path: '/list', component: List, children: [{ path: 'detail', component: Detail, // Detail组件独享此路由守卫 beforeEnter: (to, from, next) => {} }] }] });

说明 ① 组件内部的beforeEnter()是独享前置路由守卫 ② 独享路由守卫只有前置没有后置 ③ 独享路由守卫与全局路由守卫可一起搭配使用

组件内路由守卫 Detail组件 <template> <div></div> </template> <script> export default { name: 'Detail', // 通过路由，进入组件之前调用 beforeRouteEnter(to, from, next) {}, // 通过路由，离开组件之前调用 beforeRouteLeave(to, from, next) {} } </script> 说明 ① beforeRouteEnter()，通过路由，进入组件之前被调用 ② beforeRouteLeave()，通过路由，离开组件之前被调用 ③ 两者都需要调用next()放行

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。