Vue Spa切換頁面時更改標題

在Vue組件化開發過程當中，由於是單頁面開發，可是有時候須要頁面的title根據狀況改變，因而上網查了一下，各類說法花(wo)裏(kan)胡(bu)哨(dong)， 因而想到一個黑科技 documet.title="xxx";

隨便建立一個項目，在獨立的模塊中，created在鉤子函數啓動以後document.title='標題'; 可是聽說在IOS的微信下是無效的，雖然用蘋果機測試過有用，可是想到這樣會影響個人代碼潔癖。

<script>
export default {
    data(){
        return{
        }
    },
    created(){
        document.title="首頁"
    },
}
</script>

因而在github上找到一個好用的東西 vue-wechat-title

經過 npm install vue-wechat-title  安裝

引入須要的vue-router與頁面須要的組件以後

const router = new VueRouter({
    mode: 'history',
    routes:[
        {
        name: 'index',
        path: '/',
        meta: {
               title: '首頁'
          },
          component: index
        },
      {
          name: 'root',
          path: '/root',  
          meta: {
               title: '肉特'
        },
        component: root
        }   
  ]
});
Vue.use(require('vue-wechat-title')); //實例化參數

在組件中頂部添加一段 <div v-wechat-title="$route.meta.title"></div> 

便可實現改變title效果。