const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
children: [
{
path: 'bar',
component: Bar,
// a meta field
meta: { requiresAuth: true }
}
]
}
]
})
meta原信息是一個(gè)可以給路由記錄攜帶一個(gè)對(duì)象的字段(字段名只能為meta,其他的設(shè)置了也沒(méi)用),你可以在這個(gè)字段里存一些信息,例如該路由地址是否需要身份驗(yàn)證、該地址是否需要導(dǎo)航欄等。
獲取方式如下:
this.$route.meta
vue-router官方例子如下,是一個(gè)根據(jù)meta判斷該路徑是否需要驗(yàn)證登錄人的過(guò)程。
注意:在導(dǎo)航守衛(wèi)中的路由對(duì)象中,meta是在matched數(shù)組中的,并不能直接獲取到。文章來(lái)源:http://www.zghlxwxcb.cn/news/detail-640081.html
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() // 確保一定要調(diào)用 next()
}
})
使用注意事項(xiàng):我們可以通過(guò)this.$route.meta.requiresAuth = false直接對(duì)meta進(jìn)行修改,并且跳到其他路由地址,該路由地址上的meta也不會(huì)恢復(fù)最初的結(jié)果,而是保留修改后的數(shù)據(jù),但是不能刷新,如果在任意地址刷新了頁(yè)面,則meta會(huì)恢復(fù)最初的樣子。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-640081.html
到了這里,關(guān)于vue-router 路由元信息meta的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!