路由--导航守卫 （路由过滤器）
引：正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。
导航守卫分为三种：全局守卫、独享守卫、组件守卫。
1、全局守卫
在router的index里面通过 router实例对象配置
const router = new VueRouter({ routes: [{ path: '/home', component: HomeLayout, children: [ ...... }) /** * 全局路由，前置守卫，在路由切换前调用 * to:即将要进入的目标 路由对象 * from :当前导航正要离开的路由 * next：进行管道中的下一个钩子 @TODO 必须调用 如果不调用 就不会发生跳转 * * 可以加一些限制条件 例如：是否已经登录.... * */ router.beforeEach((to, from, next) => { console.log(to, from, next,localStorage.getItem("isLogin")) if (localStorage.getItem("login")=='ok') { //要主动调用 next() } else { alert("请先去登录") } }); /** * 全局路由，后置守卫，在路由切换后调用 * to:即将要进入的目标 路由对象 * from :当前导航正要离开的路由 * * 例如：可以做修改 网页 title 名称-->document.title="" * */ router.afterEach((to, from) => { console.log(to, from,) });
2、独享守卫
在router的index里面通过 router实例里面的路由节点里面配置
const router = new VueRouter({ routes: [{ path: '/home', component: HomeLayout, children: [ { path: 'news', component: NewsLayout, //独享守卫 beforeEnter: (to, from, next) => { console.log(to, from, next) next() } } }, { ...... ])
3、组件守卫
在组件里面配置
export default { name: "Demo", //@TODO 进来这个组件之前调用 beforeRouteEnter(to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不！能！获取组件实例 `this` // 因为当守卫执行前，组件实例还没被创建 console.log(to, from, next) next() }, //@TODO 在这个组件里面 打开子组件时调用 beforeRouteUpdate(to, from, next) { // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。 console.log(to, from, next) next() }, //@TODO 离开这个组件之前调用 beforeRouteLeave(to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 `this` console.log(to, from, next) next() } }
路由元信息(meta)
配置：
const router = new VueRouter({ routes: [{ path: '/home', component: HomeLayout, meta: { title: "主页" }, children: [ ...... })
使用：
/** * 全局路由，后置守卫，在路由切换后调用 * to:即将要进入的目标 路由对象 * from :当前导航正要离开的路由 * * 例如：可以做修改 网页 title 名称-->document.title="" * */ router.afterEach((to, from) => { console.log(to, from,) document.title = to.meta.title });
Vue 导航守卫官网地址
https://v3.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%8
