Set the title of each single page in the Vue project

Two implementation methods, the first method introduces plug-ins, and the second method is programmatic implementation (recommended)

First add a title to each single-page route in the routing file index.js

routes: [{
    path: '/',
    name: 'index',
    component: index,
    meta:{
        title: 'Homepage title'
    }
    },{
    path:'/detail',
    name:'detail',
    component:detail,
    meta:{
        title: 'Details page title'
    }
}]

The first method: introduce the vue-wechat-title plugin

1. Download and install plugin dependencies

npm install vue-wechat-title --save-dev

2. Introduce and use in the entry file main.js

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

3. Modify the <router-view> tag in app.vue

<router-view v-wechat-title='$route.meta.title'></router-view>

The second method: programmatic implementation

Add the following code directly to the entry file main.js

router.beforeEach((to, from, next) => {
  /* The route changes to modify the page title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

It's over, la la la...