路由元信息
定義路由的時候可以配置meta字段。
那麼我們可以利用meta字段來做什麼呢?
設置title
name: 'category',
component: () => import('./view/creatBrainStorm/creat/category'),
meta: {
title: '卓腦'
}
我們可以在鉤子函數router.beforeEach中獲取meta中的title數據,並設置爲頁面標題。
router.beforeEach((to, from, next) => {
const title = to.meta && to.meta.title
if (title) {
document.title = title
}
}
權限校驗(例:登錄校驗)
{
name: 'cart',
component: () => import('./view/cart'),
meta: {
title: '購物車',
requireAuth: true // 當有這個字段的時候,我們就認爲這個路由頁面是要有登錄權限的
}
}
檢查meta中元字段:
if (to.meta.requireAuth) {
// 不直接通過本地緩存進行判斷,而是通過Vuex的屬性狀態進行判斷
if (store.state.user.token) {
next()
} else {
next({
path: '/login',
query: { redirect: to.fullPath }
})
}
} else {
next()
}