1. 程式人生 > >vue單頁面標題設定 title

vue單頁面標題設定 title

前端框架如 Vue、React 等都是單頁面的應用,整個web站點其實是一個index頁面,頁面跳轉都是替換index.html裡邊的內容。這與傳統的每個頁面設定title標籤的做法不一樣。

vue-wechat-title作用

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

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

安裝

npm install vue-wechat-title --save

用法

1,在 main.js 中引入

import
VueWechatTitle from 'vue-wechat-title' Vue.use(VueWechatTitle)

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>

自定義載入的圖片地址 預設是 ./favicon.ico 可以是相對或者絕對的

<div v-wechat-title="$route.meta.title"
img-set="/static/logo.png"></div>

ok !重啟看看