Vue不同页面展示不同的title实现方式

更新时间：2025年10月27日 09:07:41 作者：马❀腾

文章介绍了如何在`router.js`文件中设置路由、添加自定义的`meta`属性来定义当前视图的标题,并在路由导航守卫中进行相应的处理,最后通过查看效果来验证实现

Vue不同页面展示不同的title

1.在router.js文件中

设置 routes: [] 添假meta属性自定义当前试图的title

{
   path: '/login',
   component: Login,
   meta: { title: '登录系统' }
}

2.在router.js文件中设置

路由导航守卫中

router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

3.完成，看效果

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue 判断元素内容是否超过宽度的方式
这篇文章主要介绍了vue 判断元素内容是否超过宽度的方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
axios拦截设置和错误处理方法
下面小编就为大家分享一篇axios拦截设置和错误处理方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Vue对Element中的el-tag添加@click事件无效的解决
本文主要介绍了Vue对Element中的el-tag添加@click事件无效的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
vue.js动态设置VueComponent高度遇到的问题及解决
这篇文章主要介绍了vue.js动态设置VueComponent高度遇到的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
HTML页面中使用Vue示例进阶（快速学会上手Vue）
Vue是用于构建用户界面的渐进式JavaScript框架。特色：构建用户界面—数据变成界面；渐进式—Vue可以自底向上逐层的应用。VUE有两种使用方式，一种实在html中直接使用vue做开发，一种是企业级的单页面应用。
2023-02-02
Vue 动态添加路由及生成菜单的方法示例
这篇文章主要介绍了Vue 动态添加路由及生成菜单的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-06-06
vue单向数据绑定和双向数据绑定方式
这篇文章主要介绍了vue单向数据绑定和双向数据绑定方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
vue改变对象或数组时的刷新机制的方法总结
这篇文章主要介绍了vue改变对象或数组时的刷新机制的方法总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04
vue项目实现记住密码到cookie功能示例(附源码)
本篇文章主要介绍了vue项目实现记住密码到cookie功能示例(附源码)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-01-01
vue实现商品购物车全选反选
这篇文章主要为大家详细介绍了vue实现商品购物车全选反选，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04