vue專案中的各個介面有不同的title名稱，如何能做到動態改變呢

這裡需要用到vue的內建外掛wechat-title

1.首先在專案中npm引入

vue-wechat-title --save

2.然後在全部匯入，在main.js中進行初始化

import VueWechatTitle from 'vue-wechat-title';

Vue.use(VueWechatTitle);

3.此時在app.vue中設定router-view部分

<template>
    <div>
        <transition name="fade"
 
 mode="out-in">

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

        </transition>
    </div>
</template>

4.在路由部分也要進行title的名稱設定

export default new Router({
  routes: [
      {
          path:'/',
          redirect:'/index',
          name: {
              title: '彩虹館'
 

          }
      },
      //首頁
      {
          path:'/index',
          component:index,
          isBack:false,
          keepAlive:true,
          meta: {
              title: '彩虹館'
          }
      },
      //首頁
      {
          path:'/selfcenter',
          component:selfcenter,
          isBack:false
 
,
          keepAlive:true,
          meta: {
              title: '個人中心'
          }
      },
      //首頁
      {
          path:'/catchhome',
          component:catchhome,
          isBack:false,
          keepAlive:true,
          meta: {
              title: '彩虹館'
          }
      },
  ]
})

此時才算搞定了