Vue-router中的导航守卫（前置守卫、后置钩子）

一.前置守卫

现在我们来考虑一个需求：在一个SPA应用中，如何改变网页的标题呢？

• 网页标题是通过来实现的，但是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()
})

三.全局守卫

上述两种方式均为全局守卫：即只要进行路由跳转，都会经过这个过程
除了全局守卫，还有路由独享守卫和组件内的守卫