vue h5标题动态修改

vue h5标题动态修改

1、安装相关插件

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

2、在main.js中引用

// vue单页面应用中动态修改title
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

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

{
    path: '/chooseNumberList',
    name: 'ChooseNumberList',
    component: () => import('@/views/chooseToNetwork/chooseNumberList'),
    meta: { title: '选号入网', keepAlive: false },
    
  },
  {
    path: '/materialsList',
    name: 'MaterialsList',
    component: () => import('@/views/materialsMall/materialsList'),
    meta: { title: '激活明细', keepAlive: false },
   
  },

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

<template>
  <div id="app">
    <!-- <router-view /> -->
    <router-view v-wechat-title='$route.meta.title'></router-view>
  </div>
</template>
<script>
export default {
  name: 'App'
}
</script>