Vuejs学习笔记(三)-20.vue-router的全局导航守卫(router.beforeEach)-前置守卫(gard),全局后置钩子(router.afterEach)(hook)
全局导航守卫:解释不清
需求:希望点击每个菜单是,网页的title显示菜单名称。
2种方式实现
方式1:每个组件通过回调生命周期函数时,来创建一个title元素
Home.vue,About.vue
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <template> 2 <div> 3 <h2>我是首页</h2> 4 <router-link to="/home/news">新闻</router-link> 5 <router-link to="/home/messages">消息</router-link> 6 <router-view></router-view> 7 </div> 8 </template> 9 10 <script> 11 export default { 12 name: "Home", 13 created(){ 14 document.title = '首页' 15 } 16 } 17 </script> 18 19 <style scoped> 20 21 </style>
然后点击每个路由跳转的页面时,页面的title会显示
但是这个方式由问题,如果有100个页面,就得改100个组件的代码.很麻烦。
方式2:使用router对象的全局导航守卫
步骤1:路由中定义meta属性
步骤2:在router/index.js中使用全局导航守卫
代码如下:
router/index.js
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 import Vue from 'vue' 2 import VueRouter from 'vue-router' 3 4 // 路由的懒加载 5 const Home = () => import('../components/Home') 6 const About = () => import('../components/About') 7 const User = () => import('../components/User') 8 const HomeMessages = ()=>import('../components/HomeMessages') 9 const HomeNews = ()=>import('../components/HomeNews') 10 const Profile = ()=>import('../components/Profile') 11 12 Vue.use(VueRouter) 13 14 const routes = [ 15 { 16 path: '', 17 redirect: '/home' 18 }, 19 { 20 path: '/home', 21 component: Home, 22 meta:{ 23 title:'首页' 24 }, 25 children:[ 26 { 27 path:'', 28 redirect:'news' 29 }, 30 { 31 path:'news', 32 component:HomeNews 33 }, 34 { 35 path:'messages', 36 component:HomeMessages 37 } 38 ] 39 }, 40 { 41 path: '/about', 42 component: About, 43 meta:{ 44 title:'关于' 45 } 46 }, 47 { 48 path: '/user/:userName1', 49 component: User, 50 meta:{ 51 title:'用户' 52 } 53 }, 54 { 55 path:'/profile', 56 component: Profile, 57 meta:{ 58 title:'档案' 59 } 60 } 61 ] 62 63 const router = new VueRouter({ 64 routes, 65 mode:'history' 66 }) 67 68 router.beforeEach((to,from,next)=>{ 69 document.title = to.matched[0].meta.title 70 next() 71 }) 72 73 export default router
to表示到哪个路由,from表示从哪个路由,next就是指下一个对象
同样可以实现点击页面,title显示指定值。
优点:只用在路由文件中维护代码即可。
一个术语:beforeEach又叫做前置守卫(guard)
另一个术语:afterEach又叫做后置钩子(hook)
使用场景暂时不清楚
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 import Vue from 'vue' 2 import VueRouter from 'vue-router' 3 4 // 路由的懒加载 5 const Home = () => import('../components/Home') 6 const About = () => import('../components/About') 7 const User = () => import('../components/User') 8 const HomeMessages = ()=>import('../components/HomeMessages') 9 const HomeNews = ()=>import('../components/HomeNews') 10 const Profile = ()=>import('../components/Profile') 11 12 Vue.use(VueRouter) 13 14 const routes = [ 15 { 16 path: '', 17 redirect: '/home' 18 }, 19 { 20 path: '/home', 21 component: Home, 22 meta:{ 23 title:'首页' 24 }, 25 children:[ 26 { 27 path:'', 28 redirect:'news' 29 }, 30 { 31 path:'news', 32 component:HomeNews 33 }, 34 { 35 path:'messages', 36 component:HomeMessages 37 } 38 ] 39 }, 40 { 41 path: '/about', 42 component: About, 43 meta:{ 44 title:'关于' 45 } 46 }, 47 { 48 path: '/user/:userName1', 49 component: User, 50 meta:{ 51 title:'用户' 52 } 53 }, 54 { 55 path:'/profile', 56 component: Profile, 57 meta:{ 58 title:'档案' 59 } 60 } 61 ] 62 63 const router = new VueRouter({ 64 routes, 65 mode:'history' 66 }) 67 //全局前置守卫 68 router.beforeEach((to,from,next)=>{ 69 document.title = to.matched[0].meta.title 70 next() 71 }) 72 //全局后置钩子 73 router.afterEach((to,from)=>{ 74 // 没有next 75 console.log(to); 76 console.log(from); 77 }) 78 79 export default router
还有路由独享守卫,组件守卫,详见官方网站
https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E7%BB%84%E4%BB%B6%E5%86%85%E7%9A%84%E5%AE%88%E5%8D%AB
本文来自博客园,作者:kaer_invoker,转载请注明原文链接:https://www.cnblogs.com/invoker2021/p/14988273.html