vue动态修改页面标题,vue设置页面标题

　　本文主要介绍了利用vue动态设置浏览器标题的方法，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。

目录

　　废话正文第一router/index.js第二1。安装插件2.main.js参考3。添加说明摘要

废话

　　通常，设置浏览器标题是这样的

　　但是vue是单页面应用，入口文件只有一个html，只能设置一个标签，所以下面介绍两种常用的动态设置浏览器标签的方法。

正文

第一种

　　使用浏览器本机方法document.title

router/index.js

　　路由器. beforeEach

　　//多语言项目，基于自己的项目。

　　从“@/i18n/index”导入i18n；

　　document.title=i18n.t(路由器。to.name)

　　//单语项目

　　document.title=to.name

　　语言切换路线不变，所以要加，不使用单语项目。

　　//多语言项目

　　document.title=i18n.t(路由器。to.name)

　　End，推荐，原生兼容性好，无需下载安装其他依赖包。

第二种

　　使用插件

1.安装插件

　　npm安装vue-微信-标题-保存

2.main.js 引用

　　从“vue-微信-标题”导入vuewechattle动态修改标题

　　vue . use(vuewachtitle)

3.添加指令

　　//多语言项目

　　路由器-查看v-微信-title=$t(路由器。$ route . name)/路由器视图

　　//单语项目

　　路由器视图v-we chat-title= $ route . name /路由器视图

　　结束生活

笔记

　　注意：的值基于您自己项目的路由结构。这个演示使用了name值，i18n有相应的语言包。

　　您可以向元对象添加一个title属性，并在外部使用to.meta.title。

总结

　　本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。