What are the ways to set the title of vue dynamic browser
Vue dynamic browser title setting methods, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.
This article brings you about how to use vue to achieve the effect of dynamically setting browser titles. I hope it will be helpful to you.
Vue dynamically sets browser title
The browser title is set as shown in the following figure:
However, vue is a single-page application, and the entry file has only one html, so you can only set one tag, so here are two common methods of dynamically setting browser tags.
Text the first kind
Use the browser native method document.title
Router/index.js
In router.beforeEach
/ / multilingual project, import i18n from'@ / i18n indexation according to your own project; document.title = i18n.t ("router." + to.name) / / monolingual project document.title = to.name
The language switching route remains the same, so it is necessary to add it, not for single-language projects.
/ / multilingual project document.title = i18n.t ("router." + to.name)
Finished, recommended, good native compatibility, no need to download and install other dependent packages
The second kind
Use plug-ins
1. Install the plug-in
Npm install vue-wechat-title-save
2.main.js reference
Import VueWechatTitle from 'vue-wechat-title'// dynamically modifies titleVue.use (VueWechatTitle)
3. Add instruction
/ / multilingual project / / monolingual project
Finish the work
Notes
Note: the value is based on the routing structure of the project. This demo uses the name value, and i18n has the corresponding language pack.
You can add a title attribute to the meta object and use to.meta.title on the outside
Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.
