路由切换动态改变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图片

安装vue-wechat-title包

    npm i --save vue-wechat-title

在main.js中引入并启用

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

在路由规则配置文件中添加title

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

在app.vue中修改router-view标签

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

小弟刚入行，正在学习中，哪怕学一点点，那也是进步。有改善的地方请各位留言补充，谢谢！大牛不喜勿喷！！！