vue單頁面標題設置 title

2019-8-9    釋然 前端及開發文章及欣賞

如果您想訂閱本博客內容,每天自動發到您的郵箱中,

推薦使用 vue-wechat-title

vue-wechat-title作用
Vuejs 單頁應用在iOS系統下部分APP的webview中 標題不能通過 document.title = xxx 的方式修改 該插件只為解決該問題而生(兼容安卓)

已測試APP 
微信 
QQ 
支付寶 
淘寶

安裝
npm install vue-wechat-title --save
1
用法
1,在 main.js 中引入
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)
1
2
2,在路由文件 index.js 中給每個路由添加 title
// 掛載路由
const router =  new Router({
   mode: 'history',
   routes:[
        {
          path: '/',
          name: 'Index',
          component: Index,
          meta: {
            title: '首頁'   // 標題設置
          }
        },
        {
          path: '/lists',
          name: 'Lists',
          component: Lists,
          meta: {
            title: '列表'  // 標題設置
          }
        }
     ]
});

3,在 app.vue 中修改 router-view 組件
<router-view v-wechat-title='$route.meta.title'></router-view>
1
自定義加載的圖片地址 默認是 ./favicon.ico 可以是相對或者絕對的

<div v-wechat-title="$route.meta.title" img-set="/static/logo.png"></div>
1
ok !重啟看看

藍藍設計www.thriveonsite.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

標簽: vue單頁面標題設置 title

日歷

鏈接

blogger

藍藍 http://www.thriveonsite.com

存檔

99彩票网址多少 江西快3 2019网赚游戏 北京快乐8 平安彩票 华夏网赚论坛官网华夏网赚论坛福缘网赚论坛网 网赚彩票群可靠吗 2019免费网赚项目 江苏快3走势图 上海天天彩选4