路由守卫

最新推荐文章于 2024-08-13 04:17:13 发布

源魔方

最新推荐文章于 2024-08-13 04:17:13 发布

阅读量133

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_45149720/article/details/108852660

版权

vue 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

全局路由守卫：在路由跳转前(beforeEach)、跳转(afterEach)后需要执行的代码。

比如需要在跳转后网页的title也跟着变化(不同页面有不同的title显示)：
首先需要在配置路由时，给对象加上meta(元数据)；

    {
      path: '/home',
      name: 'home',
      component: Home,
      children:[
        {
          path:'news',
          component:news
        },
        {
          path: 'message',
          component: message
        }
      ],
      meta:{
        title:'首页',
      }

用路由守卫，to将要转到的网页，from转之前的网页，最后的next()必须要有，不然不会执行跳转。

router.beforeEach((to, from, next) => {
  window.document.title = to.meta.title;
  next();
})

**后置守卫(afterEach)：**和beforeEach不同的是afterEach不接收第三个参数 next 函数，也不会改变导航本身.

路由独享守卫： beforeEnter和全局守卫beforeEach参数一样。
组件内路由守卫：组件路由守卫是写在每个单独的vue文件里面的路由守卫。beforeRouteEnter ，在路由进入前(注意：组件实例还未渲染，无法用this获取实例)；beforeRouteUpdate ，同一页面，刷新不同数据时响应；beforeRouteLeave ，离开当前路由页面时响应。