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:
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值