const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
// a meta field
meta: { requiresAuth: true }
}
]
}
]
})
meta原信息是一个可以给路由记录携带一个对象的字段(字段名只能为meta,其他的设置了也没用),你可以在这个字段里存一些信息,例如该路由地址是否需要身份验证、该地址是否需要导航栏等。
获取方式如下:
this.$route.meta
vue-router官方例子如下,是一个根据meta判断该路径是否需要验证登录人的过程。
注意:在导航守卫中的路由对象中,meta是在matched数组中的,并不能直接获取到。
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()
}
})
使用注意事项:我们可以通过this.$route.meta.requiresAuth = false直接对meta进行修改,并且跳到其他路由地址,该路由地址上的meta也不会恢复最初的结果,而是保留修改后的数据,但是不能刷新,如果在任意地址刷新了页面,则meta会恢复最初的样子。