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

自己的筆記，僅供參考，歡迎留言