vue学习十三 vue界面的title动态改变

vue项目中的各个界面有不同的title名称，如何能做到动态改变呢

这里需要用到vue的内置插件wechat-title

1.首先在项目中npm引入

vue-wechat-title --save

2.然后在全部导入，在main.js中进行初始化

import VueWechatTitle from 'vue-wechat-title';

Vue.use(VueWechatTitle);

3.此时在app.vue中设置router-view部分

<template>
    <div>
        <transition name="fade" mode="out-in">

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

        transition>
    div>
template>

4.在路由部分也要进行title的名称设置

export default new Router({
  routes: [
      {
          path:'/',
          redirect:'/index',
          name: {
              title: '彩虹馆'
          }
      },
      //首页
      {
          path:'/index',
          component:index,
          isBack:false,
          keepAlive:true,
          meta: {
              title: '彩虹馆'
          }
      },
      //首页
      {
          path:'/selfcenter',
          component:selfcenter,
          isBack:false,
          keepAlive:true,
          meta: {
              title: '个人中心'
          }
      },
      //首页
      {
          path:'/catchhome',
          component:catchhome,
          isBack:false,
          keepAlive:true,
          meta: {
              title: '彩虹馆'
          }
      },
  ]
})

此时才算搞定了