路由元信息
定义路由的时候可以配置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()
}