vue -- 路由元信息(meta)
定义路由的时候可以配置 meta
字段, 我们可以在这里设置一些自定义信息,供页面组件或者路由钩子函数中使用。
route:
meta:{
title:'关于'
}
路由前置守卫:(我们可以通过 $route.meta.xxxx 获取路由元信息中的数据)
我们可以在钩子函数 router.beforeEach 中获取 meta 中的 title 数据,并设置为页面标题
router.beforeEach((to,from,next)=>{
// && 与运算 有时可以代替用来代替if 如果前一个值为 true ,则返回后面那个值
to.meta && setTitle(to.meta.title)
})
export const setTitle = (title) => {
// 如果该路由没有设置title值,则前一个是 undefined || 前一个值为false时直接返回admin
// console.log(window.document);
window.document.title = title || 'admin'
}
输出: title为刚才的关于
其他为admin: