教你在微信中給Vue單頁應用設定標題
阿新 • • 發佈：2019-02-07
前言
由於Vue React Angular等框架出來的應用都是SPA(single-page-application),所以就沒有所謂的頁面 都是router
而網頁的標題 隨著路由的改變而改變 也就成了一個(偽)需求
問題
在iOS的微信中 一個SPA應用 想要改變微信頂部導航欄的標題 使用document.title = xxx來改變網頁標題是無效的
原因大致就是因為在微信中webview只加載網頁標題一次 動態改變是無效的 除非都以新頁面開啟(那SPA的使用者體驗有什麼卵用嗎)
解決方案 請直接看後記
既然js動態改變不能生效 那為什麼不嘗試在路由切換完成後 靜默載入一個空iframe動態設定title呢?
這也是載入頁面的一種方式不是嗎?
file: utils/setWechatTitle.js
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
module.exports = function (title)
{
document.title = title
var mobile = navigator.userAgent.toLowerCase()
if (/iphone|ipad|ipod/.test(mobile)) {
var iframe = document.createElement('iframe')
iframe.style.display = 'none'
// 替換成站標favicon路徑或者任意存在的較小的圖片即可 |
file: main.js
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | import Vue from 'vue' import App from './App' import Router from 'vue-router' import setWechatTitle from './utils/setWechatTitle.js' Vue.use(Router) var router = new Router() // 這裡用到的API是Vue-router1.x的對應Vuejs1.x // 請注意根據不同版本的API去修改程式碼 包括下方的 afterEach router.map({ home: { name: 'home', title: '首頁', component: require('./views/Home.vue') }, order: { name: 'order', title: '訂單', component: require('./views/Order.vue') }, UCenter: { name: 'UCenter', title: '使用者中心', component: require('./views/UCenter.vue') } }) router.afterEach((transition) => { let title = transition.to.title + '-Custom-Suffix' setWechatTitle(title) }) router.redirect({ '*': '/home' }) router.start(App, 'app') |
效果
