Vue dynamically modifies browser icon and title

There are generally requirements in the project: the browser icon is customized, and the display of the browser title is the current menu .
At this time, we need to dynamically set the browser title to achieve this effect.

1. Change the browser icon

Find the following file in the project

and replace the pattern in the file with the pattern you want to display

2. Dynamically modify the browser title

1. Install the plug-in
npm vue-wechat-title --save
or
npm install --save vue-wechat-title
If the above two commands fail, just install according to the failure prompt.

2. Introduce the plug-in in main.js
import VueWechatTitle from 'vue-wechat-title' //动态修改浏览器标题
Vue.use(VueWechatTitle)

3. Add/modify title in "meta" in the route

routes: [{
   path: '/login',
   component: Login,
   meta: {
    title: '登录'
   }
  },
  {
   path: '/homePage',
   component: homePage,
   meta: {
    title: '首页'
   }

4. Add v-wechat-title in App.vue
<router-view v-wechat-title='$route.meta.title' />