vue-router路由元信息meta小白攻略
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>