在Vue项目中，是一个单页面应用，也就是只有一个index.html,所有的页面内容都是在这个页面渲染的。那么就带来了一个问题，就是每一个页面的title如何设置。

解决方案：

• 不使用三方组件 通过在每一个组件的钩子函数，create,或者mouted函数，使用document.title='标题名字';

 mounted:function () {
    document.title='测试导航栏';  
 },

• 使用三方组件 vue-wechat-title组件

1. 安装vue-wechat-title组件 

//安装命令
npm install vue-wechat-title --save

2.在main.js中全局使用

Vue.use(require('vue-wechat-title'))

3.配置每一个跳转路由的title，样式如下:

 routes: [
    {
      path: '/',
      name: 'AdminLogin',
      component: AdminLogin,
      meta:{
        title:'登录页面'
      }
    },
    {
      path:'/forgetPwd',
      component:ForgetPwd,
      meta:{
        title:'忘记密码'
      }
    }
  ]

4.在模板中使用，一般为了避免多次用，可以在APP.vue中设置，可以设置在<div v-wechat-title='$route.meta.title'>或者

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

  <div id="app" v-wechat-title='$route.meta.title'>
    <router-view v-wechat-title='$route.meta.title'></router-view>
    <!-- <router-view/> -->
  </div>

学习博客:

https://blog.csdn.net/qq_39702364/article/details/80859980

https://www.jianshu.com/p/fc54e7988436

https://www.cnblogs.com/jiayeyuan/p/10137203.html