在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了~