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

在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"即可


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

你可能感兴趣的:(vue设置路由title,实现在vue路由发生变化的时候,相应的页面title随之变化)