vue -- 路由元信息（meta）

• Z时代
• 2024-01-10
• 分类：综合

定义路由的时候可以配置 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：

以上是 vue -- 路由元信息（meta） 的全部内容， 来源链接： utcz.com/z/377260.html