vue h5修改标题 title

 

 

1. 安装vue-wechat-title:

npm install vue-wechat-title

2. 在mian.js 中引入：

1.  
   import vueWechatTitle from 'vue-wechat-title'
2.  
   Vue.use(vueWechatTitle)

3. 在路由中配置meta

1.  
   {
2.  
   path: '/index',
3.  
   name: 'index',
4.  
   component: () => import('@/pages/views/index.vue'),
5.  
   meta: { title: '亲子购物节' }
6.  
   },
7.  
   {
8.  
   path: '/pack/detail/:productId',
9.  
   name: 'packDetail',
10.  
    component: () => import('@/pages/views/details/packDetail.vue'),
11.  
    meta: { title: '拼团详情' }
12.  
    }

4. 修改title

在需要修改的页面添加：

<div v-wechat-title="$route.meta.title"></div>

或者在app.vue文件中：

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

 

也可以动态的改变title：

<div v-wechat-title="$route.meta.title={data.title}"></div>