踩两次坑，都是路由守卫问题，好好了解一下

splendid
946 阅读2分钟

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

在一次业务中，踩了坑之后，去找官方文档和其他文章好好学习了一波vue-router的路由守卫。
是这样的，我想着在每次跳转当前页面的时候都个给头部添加标题，同时初始化一个开始时间，下面是两次的错误操作
第一次错误操作：在一个组件中使用，但在router.js文件里面没有注册，它不是路由组件

const router = new VueRouter({
    mode: 'history',
    routes: [
        // 目录
        {
            name: 'directory',
            path: resolvePath('directory'),
            component: () => import('../views/directory'),
        }
    ]
});

Home.vue

beforeRouteEnter(to, from, next) {
    document.title = '这是标题' 
    next();
}

后来找到了问题，我需要在directory.vue文件里才可以使用beforeRouteEnter 这是官网的一句话

你可以在路由组件内直接定义以下路由导航守卫：

第二次错误操作：在beforeRouteEnter里面使用了this\

directory.vue

beforeRouteEnter(to, from, next) {
    document.title = '这是标题' 
    this.start = new Date() // 报错错误！！！
    next();
}

然后在官网里面又看到

beforeRouteEnter 守卫 不能 访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。

那让我们看看这个路由守卫是什么吧
官方解释：
正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。

记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。

一共有这几种形式
beforeRouterLeave-->beforeEach-->beforeEnter-->beforeRouteEnter-->beforeResolve-->afterEach-->beforeRouteEnter

首先，可以在路由文件中使用

全局：

beforeEach、beforeResolve、afterEach

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

全局的操作我可能会做这个处理：当跳转一个不存在的路由时，给一个404页面

router.beforeEach((to, from, next) => { 
    to.matched.length === 0 ? next({ 
        path: '/404',
        replace: true
     }) : next()
 })

独享守卫：beforeEnter

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内：

beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

beforeRouteEnter(to, from, next) {
    next()
}
beforeRouteUpdate(to, from, next) {
    next()
}
beforeRouteLeave(to, from, next) {
    next()
}

beforeRouteUpdate这个的使用是当我们跳不同页面，但使用的是同一个路由组件时可以触发这个守卫

to是去哪，即将要进入的目标，from是从哪来

就像我上面写的那样，每次必须执行next()
确保 next 函数在任何给定的导航守卫中都被严格调用一次。它可以出现多于一次，但是只能在所有的逻辑路径都不重叠的情况下，否则钩子永远都不会被解析或报错

next(false) : 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。

avatar
文章
阅读
粉丝