路由切換動態改變title的內容

適用於PC端及部分移動端

在配置路由規則文件router/index.js中修改路由配置規則，添加meta: { title: ‘xxxx’ }，在導航守衛中經過document.title的方式來動態改變title的值。

let router = new Router({
  routes: [
        { 
          path: 'class',
          name: 'class',
          component: resolve=>require.ensure([], () => resolve(require('@/components/classroom')), 'class'),
          meta:{title: '教室信息'}
        },
        {
          path: 'storage', 
          name: 'storage',
          component: resolve=>require.ensure([], () => resolve(require('@/components/storage')), 'storage'),
          meta:{title: '文件存儲'}
        },
        ......
  ]
});
router.beforeEach((to, from, next) => {
  /* 路由發生變化修改頁面title */
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  next();
});
export default router
複製代碼

利用第三方插件包來改變title的值，解決不分移動端設備title適配問題

vue單頁應用在IOS系統下部分APP的中標題不能經過 document.title = xxx 的方式修改，該插件只爲解決該問題而生(兼容安卓)

在vue單頁面中，經過瀏覽器分享到QQ、微信等應用中的連接，只有一個首頁標題和默認icon圖片

1. 安裝vue-wechat-title包

npm i --save vue-wechat-title
複製代碼

2. 在main.js中引入並啓用

import VueWechatTitle from 'vue-wechat-title'
    Vue.use(VueWechatTitle)
複製代碼

3. 在路由規則配置文件中添加title

{ 
      path: 'storage', name: 'storage',
      component: resolve=>require.ensure([], () => resolve(require('@/components/storage')), 'storage'),
      meta:{title: '文件存儲'}
    }
複製代碼

4. 在app.vue中修改router-view標籤

<router-view v-wechat-title='$route.meta.title'/>
複製代碼

---

小弟剛入行，正在學習中，哪怕學一點點，那也是進步。有改善的地方請各位留言補充，謝謝！大牛不喜勿噴！！！