vue-router路由元信息meta

摘要：在定义路由时定义一个需要验证的meta信息 meta: {requiresAuth: true} 路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录

1. 前言：

在全局守卫beforeEach((to,from,next) => {...})中判断当前路由是否允许登录、是否需要身份认证、权限认证等，虽然可以采用路由匹配的方式 if(to.path === '/url')，很显然当需要验证的路由较多时，会增加太多的if判断，这不利于代码维护，此时可在定义路由的时候可以配置 meta 字段，通过设置一些属性值，可以便于我们对当前的路由做一些处理，也可以使用next()重定向到其他路由。

2. 使用

在定义路由时定义一个需要验证的meta信息 meta: {requiresAuth: true} 路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录，例如，根据下面的路由配置，/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})

一个路由匹配到的所有路由记录会暴露为 $route 对象的 $route.matched 数组。因此，我们需要遍历 $route.matched 来检查路由记录中的 meta 字段，然后在全局导航守卫中检查元字段是否需要验证

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // this route requires auth, check if logged in
    // if not, redirect to login page.
    if (!auth.loggedIn()) {
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 确保一定要调用 next()
  }
})

配置组件是否需要缓存

<!-- app.vue中的代码 -->
<!-- 需要被缓存的路由入口 -->
<keep-alive>  
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>

<!-- 不需要被缓存的路由入口 -->
<router-view v-if="!$route.meta.keepAlive"></router-view>

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_2141