Vue SPA页面动态设置index.html的title

2019-08-21 2,089 阅读1分钟

使用vue-wechat-title插件

1、安装

npm install vue-wechat-title --save

2、在main.js中引入插件

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

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

{
  path: '/adwap/login',
  component: AdwapLogin,
  name: 'AdwapLogin',
  meta: {
    title: '派单堂',
    keepAlive: false
  }
},

4、在app.vue中修改router-view组件

<template>
  <div id="app">
    <keep-alive >
        <router-view v-wechat-title='$route.meta.title' v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-wechat-title='$route.meta.title' v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>