Vue Router路由守卫超详细介绍
小五ccc 人气:0全局前置&后置路由守卫
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()放行
加载全部内容