微信H5中动态设置标题(vue-wechat-title)

1、安装包 vue-wechat-title

npm install vue-wechat-title --save

2、在 main.js 中引入

        == 两种引入方法

// 第一种
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

// 第二种
Vue.use(require('vue-wechat-title'))

3、在路由中的 meta 中添加 title 属性记录标题的名字

{
    path: '/Health_platform',
    name: 'Health_platform',
    component: () =>
        import ('../views/article/Health_platform.vue'),
    meta: {
        title: '健康管理平台',
        keepAlive: true,
    },
},
{ 
    path: '/new_login',
    name: 'new_login',
    component: () =>
        import ('../views/new_user/new_login.vue'),
    meta: {
        title: '登录',
        keepAlive: true
    },
},

4、在 vue 文件中使用

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

猜你喜欢

转载自blog.csdn.net/LXY_1999/article/details/127847420
今日推荐