vue开发微信H5——动态改变页面

需求说明

动态的修改微信的title，vue2.0开发，基于微信

1. 安装插件

   npm install vue-wechat-title --save

2. 在项目中引入（main.js）

   Vue.use(require('vue-wechat-title'))

3. 进行路由配置（index.js）

   routes: [
   {
     path: '/',
     name: 'BasicPage',
     meta: {
       title: '首页'
     },
     component: BasicPage
   },
   {
     path: '/login',
     name: 'Login',
     meta: {
       title: '登录'
     },
     component: Login
   },
   {
     path: '/register',
     name: 'Register',
     meta: {
       title: '注册'
     },
     component: Register
   }
 ]

4. App.vue文件内利用

<div id="app">
   <div v-wechat-title="$route.meta.title"></div>  <!--控制微信title-->
   <router-view/>
 </div>

参考github上的开源项目

https://github.com/deboyblog/vue-wechat-title

自己的笔记，仅供参考，欢迎留言