What is the method of dynamically setting the browser title by vue

This article is to share with you about the method of dynamically setting browser titles on vue. The editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article.

Nonsense

The browser title is usually set like this.

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-save2.main.js references import VueWechatTitle from 'vue-wechat-title'// to dynamically modify 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

This is how vue dynamically sets the browser title. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.