vue-router路由元信息详解

1.路由元信息:定义路由的时候可以配置 meta 字段

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

那么如何访问这个 meta 字段呢?

首先,我们称呼 routes 配置中的每个路由对象为 路由记录。路由记录可以是嵌套的,因此,当一个路由匹配成功后,他可能匹配多个路由记录。

例如,根据上面的路由配置,/foo/bar 这个 URL 将会匹配父路由记录以及子路由记录。

1. 一个路由匹配到的所有路由记录会暴露为 $route 对象(还有在导航守卫中的路由对象)的 $route.matched 数组。
2. 因此,我们需要遍历 $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()
  }
})

解析:

1、meta 字段就是路由元信息字段,requiresAuth 是自己起的字段名称,用来标记这个路由信息是否需要检测,true 表示要检测,false 表示不需要检测(这个名称随便起,比如我自己的就起的 requiresId,建议起个有意义的名称)

2、if (to.matched.some(record => record.meta.requiresAuth) ),如果对这类写法不熟悉,可以去看看es6的箭头函数,这句话就是返回遍历的某个路由对象,我们定义为为record,检测这个对象是否拥有meta这个对象,如果有meta这个对象,检测它的meta对象是不是有requiresAuth这个属性,且为true,如果满足上述条件,就确定了是这个/foo/bar路由。

function(i){ return i + 1; } //ES5
(i) => i + 1 //ES6

3、this route requires auth, check if logged in ,说明auth信息是必须的,检验是否登录,也就是在这个路由下,如果检测到auth这个用户名,那么进行下一步操作!

4、案例下面就有了判断,if (!auth.loggedIn()),通过自己封装的检验方法auth.loggedIn(),检验用户是否登录,从而决定渲染下一步操作!

总结,vue-router路由元信息说白了就是通过meta对象中的一些属性来判断当前路由是否需要进一步处理,如果需要处理,按照自己想要的效果进行处理即可!其实比较简单,大家可以研究下。
5、我项目中实例

router.beforeEach((to, from ,next) => {
    const token = store.getters.userInfo
    if(to.matched.some(record => record.meta.requireAuth)){
        next()//如果路由中有meta的requireAuth,且为true,就不进行登录验证,否则进行登录验证
    }else{
        if(token){
            next()
        }else{
            if(to.path==="/login"){
                next()
            }else{
                next({path:'/login'})
            }
        }
    }
    return
})
//系统模块
export default [
    {
        path: '/login', 
        name: 'login',
        component:() => import('@/views/system/login')
    },
    {
        path:'/register',
        name:'register',
        component:() => import('@/views/system/register'),
        meta:{requireAuth:true}
    },
    {
        path:'/perfectInfo/:identifier',
        name:'perfectInfo',
        component:() => import('@/views/system/perfectInfo'),
        meta:{requireAuth:true}
    },
    {
        path:'/resetPassword',
        name:'resetPassword',
        component:() => import('@/views/system/resetPassword'),
        meta:{requireAuth:true}
    }
]
项目中使用:通过路由元信息meta实现不同路由展现不同页面(带不同的meta信息,展示不同页面布局)
<template>
  <el-container :class="['app uf-col']">
    <template v-if="$route.meta.fullScreen">
      <router-view></router-view>
    </template>
    <template v-else-if="$route.meta.homePages">
      <Nav></Nav>
      <router-view></router-view>
    </template>
    <template v-else>
      <WHeader></WHeader>
      <el-container>
        <WMenu></WMenu>
        <router-view></router-view>
      </el-container>
    </template>
  </el-container>
</template>
//系统模块
export default [
    {
        path: '/login', 
        name: 'login',
        component:() => import('@/views/system/login'),
        meta:{fullScreen:true}
    },
    {
        path:'/register',
        name:'register',
        component:() => import('@/views/system/register'),
        meta:{requireAuth:true,fullScreen:true}
    },
//静态主页模块
export default [
    {
        path:'/rescue',
        name:'rescue',
        component:() => import('@/views/pages/rescue'),
        meta:{homePages:true}
    }
]

然后我们再看下路由导航守卫,加上homePages:如果路由元信息里面requireAuth为true,或者homePages为true,都不拦截

router.beforeEach((to, from ,next) => {
    const token = store.getters.userInfo
    if(to.matched.some(record => record.meta.requireAuth || record.meta.homePages)){
        next()
    }else{
        if(token){
            next()
        }else{
            if(to.path==="/login"){
                next()
            }else{
                next({path:'/login'})
            }
        }
    }
    return
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值