第十五节：VueRouter4.x用法之router-link/router-view的v-slot、动态增删路由、路由导航守卫
一. router-link的v-slot
（需要复习一下插槽的相关用法：https://www.cnblogs.com/yaopengfei/p/15338752.html）
二. router-view的v-slot
了解即可
三. 动态增删路由
1. 添加路由
(1). 添加1级路由
使用addRoute方法，直接添加即可
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes
})
// 动态添加1级路由
const Test1Router = {
path: '/test1',
name: 'test1',
component: () => import('../views/Test1.vue'),
}
router.addRoute(Test1Router);
(2). 添加2级路由
使用addRoute方法，第一个参数传入父级路由的名称。
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
// 动态添加2级路由
const Test2Router = {
path: 'test2', //特别注意这里的test2之前不写/, 自动就给加上了
component: () => import('../views/Test2.vue'),
}
// 第一个参数要写对应父级路由的名字，即name属性
router.addRoute('Home', Test2Router);
2. 删除路由
方式一：添加一个name相同的路由进行覆盖；
方式二：通过removeRoute方法，传入路由的名称，即name属性；
方式三：通过addRoute方法的返回值回调实现删除；
PS： 补充其它方法
四. 路由导航守卫
（详细的导航守卫见官网：https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#导航守卫， 本节重点介绍全局前置守卫 beforeEash）
1. 前置守卫
使用 router.beforeEach 注册一个全局前置守卫，可以理解 跳转到每个路由之前，都有经过这个守卫。
(1). 两个参数：
to：即将进入的路由Route对象；
from：即将离开的路由Route对象；
(2). 返回值：
A. false：取消当前导航，直接截断，不跳转；
B. 不返回或者undefined：进行默认导航；（相当于以前的 next() 里面什么参数不写）
C. 返回一个路由地址：
a. 可以是一个string类型的路径；
b. 可以是一个对象，对象中包含path、query、params等信息； router.push({path: "/login", query: ....})
注：可选的第三个参数：next，在Vue2中我们是通过next函数来决定如何进行跳转的；但是在Vue3中我们是通过返回值来控制的，不再推荐使用next函数，这是因为开发中很容易调用多次next；
2. 案例
我们要做一套业务，必须登录后才能看见其它页面，简单模拟一下即可。
// 登录守卫 // (说明：只有经过登录页面以后，才允许访问其它页面，否则统一退回到登陆页) /** * 参数： * to: Route对象, 即将跳转到的Route对象 * from: Route对象, * 返回值问题: * 1.false: 不进行导航 * 2.undefined或者不写返回值: 进行默认导航 * 3.字符串: 路径, 跳转到对应的路径中 * 4.对象: 类似于 router.push({path: "/login", query: ....}) */ router.beforeEach((to, from) => { // console.log(to, from); if (to.path !== '/login') { var myToken = window.localStorage.getItem('myToken'); if (!myToken) { return '/login'; } } });
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
