一.前置守卫
现在我们来考虑一个需求:在一个SPA应用中,如何改变网页的标题呢?
- 网页标题是通过
<titile>
来实现的,但是SPA只有一个固定的HTML,切换不同的页面时,标题并不会改变 - 那么在Vue项目中,要怎么修改呢?此时就可以使用导航守卫
导航守卫的作用:监听路由跳转的过程
实现代码如下:利用beforeEach方法来完成标题的修改
首先在映射中定义一些标题,用meta元数据来定义
const routes = [
{
path:'/user/:abc',
component: User,
meta:{ //元数据(描述数据的数据)
title:'用户' // 起title名
}
},
{
path:'/hello',
component: Hello,
meta:{
title:'首页'
}
]
const router = new Router({
routes,
mode:'history'
})
其次利用 导航守卫 修改标题
//前置守卫(guard):在路由跳转之前,就能将数据回调
router.beforeEach((to,from,next) => { // 导航守卫
document.title = to.matched[0].meta.title
next()
})
export default router
- to: 即将要进入的目标的路由对象
- from: 当前导航即将要离开的路由对象
- next:调用该方法后,才能进入下一个钩子
此步骤为关键:
二.后置钩子
如果是后置钩子,也就是afterEach方法,则不需要主动调用next()函数
router.afterEach((to,home) => {
// 在路由跳转之后,再回调,不需要主动调用next()
})
三.全局守卫
上述两种方式均为全局守卫:即只要进行路由跳转,都会经过这个过程
除了全局守卫,还有路由独享守卫和组件内的守卫