vue h5修改标题 title

1. 安装vue-wechat-title:

npm install vue-wechat-title

2. 在mian.js 中引入：

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

3. 在路由中配置meta

{
    path: '/index',
    name: 'index',
    component: () => import('@/pages/views/index.vue'),
    meta: { title: '亲子购物节' }
},
{
    path: '/pack/detail/:productId',
    name: 'packDetail',
    component: () => import('@/pages/views/details/packDetail.vue'),
    meta: { title: '拼团详情' }
}

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>

来源：https://blog.csdn.net/csdn9_14/article/details/98748736

标签