vue导航守卫-一一网

这是我参与更文挑战的第8天，活动详情查看：更文挑战”

Vue-Router导航守卫

在很多情况下，我们需要对路由进行一定的操作，比如说判断用户是否登录或者在登录时是否填完必填信息，当用户满足我们的必要要求后在对页面进行跳转，那么我们就要，通过一定的方式，监听路由的改变。Vue官方提供了三种植入方式：全局的(全局前置守卫), 单个路由独享的(路由独享的守卫)以及组件级的（组件内的守卫）

全局前置守卫

vue-router 全局守卫有三个：beforeEach、beforeResolve以及 afterEach。其中beforeEach代表着在进入路由前，afterEach在进入路由后，我这么一说相信各位小伙伴们肯定会毫不犹豫的说 “那 beforeResolve不就是那进入路由时的那一刻了吗？”，嘿嘿，没错~确实可以这样理解， beforeResolve是在 beforeRouteEnter之后调用的。

那么既然刚开始我们先写几段代码吧~

//main.js
import router from './router'; 
import vueRouter from "vue-rourt";
Vue.use(vueRouter)
const router = new VueRouter({ ... })  //这里写路由组件 我这里 直接省略了。
router.beforeEach((to, from, next) => {
    next()
})
router.beforeResolve((to, from, next) => {
    next();
});
router.afterEach((to, from) => {
    console.log('afterEach 全局后置钩子');
});


复制代码

从上面的代码代码中大家可能发现每个方法里面传递了三个参数分别时 to、from和 next,那么这三个参数分别有什么意义呢？接下来有我带着大家一起讨论讨论吧
to: 要去哪里，在这里的意思很简单要跳转到哪个路由。
form：来自哪里，显而易见填你当前的路由。
next: 接下来，他呢是一个函数并且这个函数必须调用不然页面就会一片空白。
下面接单讲一下 next函数

next 函数

next() 当 next为空或者为true时则会进入下一个路由。
next(false) 当里面的值为false时则会中断路由跳转停在当前路由。如果浏览器的 URL 改变了，那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }) 当里面的值为一个字符串时，那么他就会把字符串当做一个路径，跳转到这个路径上面。
next(error)(2.4 +): 这是在 2.4版本新加入的，如果传入的是一个error实例，那么导航会被终止且该错误会被传递给 router.onError() 注册过的回调。or() 注册过的回调。

路由独享的守卫

如果你只想给某个单独的路由设置路由守卫时你可以这样

//在路由配置上定义beforeEnter 守卫
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // 参数用法 都一样 因为在全局前置守卫后面，所以不会被全局守卫覆盖
      }
    }
  ]
})



复制代码

组件内的守卫

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

复制代码