Shulou(Shulou.com)06/02 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.