Vue Router路由守卫
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
全局前置、后置路由守卫
-
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()放行