vue h5修改标题 title

蔚落 2021-11-05 15:52 684阅读 0赞
  1. 安装vue-wechat-title:

npm install vue-wechat-title

  1. 在mian.js 中引入：

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

  2. 在路由中配置meta

    {

    1.  path: '/index',
    2.  name: 'index',
    3.  component: () => import('@/pages/views/index.vue'),
    4.  meta: { title: '亲子购物节' }

    },
    {

    1.  path: '/pack/detail/:productId',
    2.  name: 'packDetail',
    3.  component: () => import('@/pages/views/details/packDetail.vue'),
    4.  meta: { title: '拼团详情' }

    }

  3. 修改title

在需要修改的页面添加：

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

或者在app.vue文件中：

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

也可以动态的改变title：

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

发表评论

表情：
评论列表 （有 0 条评论，684人围观）

还没有评论，来说两句吧...

相关阅读