vue设置路由title，实现在vue路由发生变化的时候，相应的页面title随之变化

1.转载以便参考
2.转自https://blog.csdn.net/wangzhaoli0915/article/details/88574314
在vue2中还可以使用vue-wechat-title插件来解决页面title的问题

import Vue from 'vue'
import Router from 'vue-router'
/*import HelloWorld from '@/components/HelloWorld'*/
import HelloVue from '@/components/HelloVue'
import HelloWorld from '@/components/HelloWorld'
import TheMenu from '../template/theMenu.vue'
Vue.use(Router)
export default new Router({
  mode: 'history',//去掉锚点#
  routes: [
    {path: '/',name: 'HelloVue',component: HelloVue,meta:{title:'首页'}},
    {path: '/index',name: 'helloWorld',component: HelloWorld,meta:{title:'首页'}},
    {path: '/menu',name: 'TheMenu',component: TheMenu,meta:{title:'首页'}}
  ]
}) 

主要是加入以下内容：meta:{title:‘首页’}
安装插件
第一步：在项目根目录下打开命令行通过npm install vue-wechat-title --save来安装插件，像下面这样就安装成功了

第二步：在 main.js 中引入并使用插件就可以

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

在App.vue中加上 v-wechat-title="$route.meta.title"即可

<template>
  <div id="app" class="menu-btn">
    <router-view v-wechat-title="$route.meta.title"/>
  </div>
</template>

如果以上这些都操作都完成了之后，重新加载一下你的页面应该就可以看到你设置的相应的title