vue 动态修改页面标题title

1.安装

npm install vue-wechat-title --save
或
npm install vue-wechat-title -S

2.使用
在main.js中引用插件

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

3.在路由router文件 index.js 中给每个路由添加 title

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      meta: {
        title: ' 首页'   // 标题设置
      }
    }, 
    {
      path: '/about',
      name: 'about',
      component: About,
      meta: {
        title: ' |关于'   // 标题设置
      }
    },
    {
      path: '/case',
      name: 'case',
      component: Case,
      meta: {
        title: ' 案例'   // 标题设置
      }
    },
    {
      path: '/contact',
      name: 'contact',
      component: Contact,
      meta: {
        title: '联系我们'   // 标题设置
      }
    },
    {
      path: '/join',
      name: 'join',
      component: Join,
      meta: {
        title: ' 加入我们'   // 标题设置
      }
    },
    {
      path: '/services',
      name: 'services',
      component: Services,
      meta: {
        title: ' 服务介绍'   // 标题设置
      }
    },
  ]
})

4，最后一步，在 app.vue 中修改 router-view 组件

//将app.vue 中
<router-view/>
// 改为
<router-view v-wechat-title='$route.meta.title'></router-view>

重启刷新页面就ok了