简介:
在初始化后被调用,跳转路由之后被调用
实现效果:
跳转到哪个路由哪个路由页的tilte改变文本
实例:
import Vue from "vue"; import Router from "vue-router"; import Home from "./views/Home.vue"; import aboutone from './views/Aboutone'; import abouttow from './views/Abouttow'; import aboutoneson from './views/Aboutoneson'; Vue.use(Router); const router =new Router({ routes: [{ // 页面开始就显示的路由 path: "/", name: "home", component: Home, meta:{isAuth:false,title:'主页'}, }, { path: "/about", name: "about", component: () => import("./views/About.vue"), meta:{isAuth:false,title:'关于'}, children: [{ name:'xiaoxi', path: 'aboutone', component: aboutone, // 需要校验就写 meta:{isAuth:true,title:'列表一'}, children:[ { path: 'aboutoneson', component: aboutoneson, meta:{isAuth:true,title:'详情'}, } ] }, { name:'abtow', path: 'abouttow', component: abouttow, meta:{isAuth:true,title:'列表二'}, }, ] } ] }); // 前置路由守卫 router.beforeEach((to,from,next)=>{ console.log('前置',to,from); //判断如果在路由上meta.isAuth为true'为true就开始校验, if (to.meta.isAuth){ document.title = to.meta.title || '路由练习' // 如果本地存储的Nuber值为yang就跳转,反之弹出权限不够 if (localStorage.getItem('Nuber') === 'ycng') { //故意改的值 next() } else{ alert('权限不够') } } else{ document.title = to.meta.title || '路由练习' next() } }) // 后置路由守卫 初始化后被调用,跳转路由后被调用 // 后置守卫没有next参数 router.afterEach((to,from)=>{ console.log('后置',to,from); }) export default router
这时出现了一个bug当点击权限不够后tilte还是改变了路由没有跳转
解决:
只需要把前置那里的 document.title = to.meta.title || '路由练习' 添加到后置路由守卫就解决了// 前置路由守卫 router.beforeEach((to,from,next)=>{ console.log('前置',to,from); //判断如果在路由上meta.isAuth为true'为true就开始校验, if (to.meta.isAuth){ // 如果本地存储的Nuber值为yang就跳转,反之弹出权限不够 if (localStorage.getItem('Nuber') === 'yng') { next() } else{ alert('权限不够') } } else{ next() } }) // 后置路由守卫 初始化后被调用,跳转路由后被调用 // 后置守卫没有next参数 router.afterEach((to,from)=>{ console.log('后置',to,from); document.title = to.meta.title || '路由练习' }) export default router
标签:__,isAuth,后置,title,next,meta,router,路由 From: https://www.cnblogs.com/0722tian/p/17158492.html