vue-router路由导航守卫

导航守卫分为三种，

一 全局导航守卫、
只要项目的路由发生一丁点改变，就会激活全局导航守卫
二 路由独享守卫
只有当设置的特定路由被激活的时候，才会触发路由独享守卫
三组件独享守卫
一个组件可能对应多个路由，只要当这个组件被激活，组件独享守卫就会被触发

三种导航守卫的设置

一全局导航守卫的设置
在vue项目的总路由文件，一般是在router文件夹下的index.js中启动
//前置全局导航守卫 在路由跳转前执行的函数

Router.beforeEach((to,from,next)=>{
//to是路由要去的地方
//from是路由来的地方
//next(): 这是必须执行的，如果没有将无法实现路由的切换。
//next(false): 中断当前的导航。
//next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
})

//后置全局导航守卫 在路由跳转后执行的函数

router.afterEach((to, from) => {
  // 参数与前置导航守卫基本一致，少了next方法，因为已经完成了当前路由的跳转，不需要再进行下一步
})

router.beforeEach((to, from, next) => {
  console.log(to)
  next()
})

router.afterEach((to, from) => {
  console.log("这是后置导航守卫")
  console.log(from)
})

路由独享导航守卫，只有前置，与全局导前置航守卫的参数和参数用法基本一致

二路由独享导航守卫的设置

const router = new Router({
  routes: [
    {
      path: '/button',
      name: 'Button',
      component: Button,
      beforeEnter: (to, from, next) => {
      	console.log(to)
      	next()
      }
    }]
    })

上里设置了路由为/button时的前置导航守卫

三组件独享导航守卫的设置
组件导航守卫的设置请去vue官网查看

这是vue官网对组件导航守卫的描述