vue-router路由元信息meta小白攻略_meta使用指南

1. 前言:
在全局守卫beforeEach((to,from,next) => {…})中判断当前路由是否允许登录、是否需要身份认证、权限认证等,虽然可以采用路由匹配的方式 if(to.path === ‘/url’),很显然当需要验证的路由较多时,会增加太多的if判断,这不利于代码维护,此时可在定义路由的时候可以配置 meta 字段,通过设置一些属

vue-router路由元信息meta小白攻略

1. 前言: 

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

vue-router路由元信息meta小白攻略_meta使用指南

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>
海计划公众号
(0)
上一篇 2020/03/31 01:52
下一篇 2020/03/31 01:52

您可能感兴趣的内容