Detailed explanation of how to dynamically set the browser title in Vue

nonsense

Usually, the browser title is set like this

But Vue is a single-page application, and the entry file only has one HTML, so only one tag can be set. So here are two commonly used methods to dynamically set browser tags.

text

The first

Use the browser native method document.title

router/index.js

router.beforeEach

//For multi-language projects, import i18n from '@/i18n/index' according to your own project;
 document.title = i18n.t("router." + to.name)
 //Single language project document.title = to.name

The language switching route remains unchanged, so it should be added as well. Single language projects do not need it.

//Multi-language project document.title = i18n.t("router." + to.name)

Completed, recommended, native compatibility is good, no need to download and install other dependent packages

The second

Using plugins

1. Install the plugin

npm install vue-wechat-title --save

2.main.js reference

import VueWechatTitle from 'vue-wechat-title'//Dynamically modify title
Vue.use(VueWechatTitle)

3. Add instructions

//Multi-language project <router-view v-wechat-title="$t('router.' + $route.name)" ></router-view>
 //Single language project <router-view v-wechat-title=" $route.name" ></router-view>

Finished

notes

Note: The value depends on the routing structure of your own project. This demo uses the name value. i18n has a corresponding language package.

You can add a title attribute in the meta object and use to.meta.title outside of it.

Summarize

This article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM!