In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-04-04 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
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.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.