导航守卫的使用

导航守卫的作用就是通过vue-router在某些事件段用来跳转或后退的回调

在路由发生变化的时候来触发

类似于生命周期函数中的钩子函数

一个小demo实现路由更换的时候标题名跟着变化

const routes = [
    // 文档模块
    {
      path: '/about',
      component: about,
      meta:{
        title:'首页'
    }
    },
    {
      // 首页模块
      path: '/heom',
      component: heom,
      meta:{
        title:'首页2'
    },

      children:[
        // 在首页中的子路由
        {
          path:'heomnews',
          component:heomnews
          // 新闻
       },
       {
         path:'heomaa',
         component:heomaa
       }
    ]
    },
    // 应用模块
    {
      path:'/wd/:wdid',
      component:wd,
      meta:{
        title:'应用'
    }
    },
  ]

 

const router = new Router({
  routes
})
console.log(router.beforeEach);


//全局前置路由守卫
router.beforeEach((to,form,next)=>{
   //改变当前路由的title内容
  document.title=to.meta.title
  
  next()
})

export default router

其中router.before Each就是前置路由守卫

语法则是：

router.beforeEach((to,form,next)=>{
  document.title=to.meta.title
  
  next()
})

其中有三个参数分别是to，form，next

to：要进入的路由对象

form：当前导航离开的路由

next：是必须调用才能进入下一个钩子，这个可以用来判断一些条件，例如后端管理系统，必须满足条件才能使得用户进入页面

里面就是写一些逻辑判断就行了

                                                                                                

---

-欢迎大家一起学习进步——谢步柔