如何在微信中(微信公众号页面)给Vue单页应用设置标题

2,018 阅读1分钟

楼主最近在微信公众号H5页面,刚好遇到了这个问题,以此记录下

第一次写好紧张,谢谢各位的支持!

本人的开发环境是vue-cli2创建的项目,由于是vue的项目,所以每个页面的标题设置就成了问题,刚度娘和谷歌了下,发现以下方法可用,大部分也是引用各位前辈的,具体操作如下

1,安装依赖

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,路由中设置

 {
        path: '/home',
        component: home,
        meta: {
          title: “首页”, //标题
        }
      }

4,app.vue设置v-wechat-title="$route.meta.title"

<!-- 任意元素中加 v-wechat-title 指令 建议将标题放在 route 对应meta对象的定义中 -->
<div v-wechat-title="$route.meta.title"></div>
<!--or-->
<router-view v-wechat-title="$route.meta.title"></router-view>
<!-- 自定义加载的图片地址 默认 ./favicon.ico 相对路径和绝对路径都可以 -->
--------------------- 

引用原文:blog.csdn.net/weixin_4212…