vue 動態修改網頁標題 title

1、安裝

npm install vue-wechat-title --save 或 npm install vue-wechat-title -S

2、使用，在main.js中引用插件

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

3、在路由router文件 index.js 中給每個路由添加 title

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        title: ' 首頁'   // 標題設置
      }
    }, 
    {
      path: '/about',
      name: 'about',
      component: About,
      meta: {
        title: ' |關於'   // 標題設置
      }
    } 
  ]
})

4、最后一步，在 app.vue 中修改 router-view 組件

//app.vue 中
<router-view/>
// 改為
<router-view v-wechat-title='$route.meta.title'></router-view>

重啟刷新頁面就ok了