vue 动态设置浏览器标题的方法详解
更新时间：2021年12月26日 16:35:58 作者：郭顺杰
这篇文章主要为大家介绍了vue动态设置浏览器标题的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
废话
平时设置浏览器标题是这样的
但vue是单页面应用，入口文件也只有一个html，只能设置一个标签，所以下面介绍两种常用的动态设置浏览器标签的方法
正文
第一种
使用浏览器原生方法 document.title
router/index.js
router.beforeEach里
//多语言项目，根根据自己项目来
import i18n from '@/i18n/index';
document.title = i18n.t("router." + to.name)
//单语言项目
document.title = to.name
语言切换路由不变，所以也要加一下，单语言项目不用
//多语言项目
document.title = i18n.t("router." + to.name)
完活，推荐使用，原生兼容性好，不用下载安装其他依赖包
第二种
使用插件
1.安装插件
npm install vue-wechat-title --save
2.main.js 引用
import VueWechatTitle from 'vue-wechat-title'//动态修改title Vue.use(VueWechatTitle)
3.添加指令
//多语言项目
<router-view v-wechat-title="$t('router.' + $route.name)" ></router-view>
//单语言项目
<router-view v-wechat-title=" $route.name" ></router-view>
完活
笔记
注意：值根据自己项目路由结构来，本demo用的是name值，i18n有对应语言包，
你可以在meta对象里加个title属性，在外面用to.meta.title即可
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!
相关文章
本篇文章主要介绍了vue数据渲染出现闪烁问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了TypeScript中集成Tween.js踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
构建现代大规模应用程序最具挑战性的方面之一是数据获取,这也是 Vue Query 库的用途所在,下面就跟随小编一起学习一下如何利用Vue Query实现高级数据获取吧2023-08-08
这篇文章主要介绍了如何解决vuex在页面刷新后数据被清除的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
Props是组件之间进行数据传递的一种方式，可以将数据从父组件传递给子组件，这篇文章主要介绍了vue3+ts深入组件Props的实例详解,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了VUE简单的定时器实时刷新的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
这篇文章主要为大家详细介绍了vue+video.js实现视频播放列表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
去年我遇到了一个甘特图的需求，做了很多工作，最终还是不完美，今天使用一个新包，给大家重新学习下vue 甘特图gantt的相关知识，感兴趣的朋友一起看看吧2021-11-11
这篇文章主要介绍了vue中的双向数据绑定原理与常见操作技巧,结合实例形式详细分析了vue中双向数据绑定的概念、原理、常见操作技巧与相关注意事项,需要的朋友可以参考下2020-03-03
二维码是一种广泛应用于各种场合的编码方式，它可以将信息编码成一张二维图案，方便快捷地传递信息，在Vue.js中，我们可以使用一些库和组件来实现二维码的生成和扫描，本文将介绍如何在Vue中实现二维码的生成和扫描的方法2023-06-06
最新评论