Vue路由守卫

Vue中的路由守卫

类别：

1.    全局守卫

2.    组件内守卫

3.    路由独享守卫

一、全局守卫：

1.  概念：

在这个守卫方法中进行全局拦截，可以设置满足某些条件（比如是否登录）

才可以进入到当前路由导向的页面

2. 设置方式：

在main.js（插件入口页面）文件中定义，有以下几个钩子函数方法

router.beforeEach（） 进入路由前执行

router. beforeResolve（）解析守卫：在导航被确认之前，同时在所有组件内的守卫和异步路由组件被解析之后，解析守卫就被调用

router. afterEach（）导航完成时执行，里面只有to和from两个形参

在这些方法中的括号里都有一个回调函数作为执行器，这个回调函数有三参数，分别是to，from，next

to：这个参数表示要到哪里去

from：表示从哪里来

next使用时要注意逻辑严谨，不然会造成死循环

next ()：这是一个方法，当你设置next（）里面不传值时，表示通行

next（false）当里面传参false时表示禁止通行

next（‘/home’）当里面传的是一个路径时，不管原来导航跳往哪里，都会重定向到此路径

next（error）阻止跳转，阻止跳转，执行router.onError()里的回调，需要注册一个router.onError()

router.onError(error=>{

  console.log('错误信息');

})

next（（）=>{  }）next这里的值可以是一个回调函数，然后在这里设置路径设置重定向，或取消导航，又或者注册一个错误

例子：

new Vue({

  el: '#app',

  router,store,

  components: { App},

  template: ''

},

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

  if(to.path=='/'||to.path=='/longe'){

    next();

  }else if(to.path=='/home'){

    alert('请先登录')   }}))

二、组件内守卫

beforeRouteEnter： 进入组件时

在渲染该组件的对应路由被confirm（确定前） 前调用，

不！能！获取组件实例 `this`，因为当守卫执行前，组件实例还没被创建

beforeRouteUpdate： 组件被复用时调用

在当前路由改变，但是该组件被复用时才调用，

举例：对于一个嵌套路由的路径，在/foo/1 和 /foo/2 之间跳转的时候， 由于会渲染同样的foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。如果不加这个钩子，则路由变化时页面检测不到数据变化，这里可以访问组件实例`this`

beforeRouteLeave： 离开组件前

 导航离开该组件的对应路由时调用，这里可以访问组件实例`this`

使用：写在组件的逻辑中

beforeRouteEnter(to, from, next) {

                       console.log('beforeRouteEnter')

                       next()

                     },

beforeRouteUpdate(to, from, next) {

                       console.log('beforeRouteUpdate')

                       next()

                      },

beforeRouteLeave(to, from, next) {

                       console.log('beforeRouteLeave')

                       next()

                     }

三、路由独享守卫

beforeEnter: 进入该路由前，必须进入某个路由才会执行

例子： 在路由中进行调用

{path: '/',

      name: 'firstlist',

      component: firstlist,

      beforeEnter(to,from,next){

      console.log('beforeEnter');

      next()}//这里注意加next（）方法，给导航放行