教你在微信中给Vue单页应用设置标题

前言

由于Vue React Angular等框架出来的应用都是SPA(single-page-application),所以就没有所谓的页面 都是router

而网页的标题 随着路由的改变而改变 也就成了一个(伪)需求

问题

在iOS的微信中 一个SPA应用 想要改变微信顶部导航栏的标题 使用document.title = xxx来改变网页标题是无效的

原因大致就是因为在微信中webview只加载网页标题一次 动态改变是无效的 除非都以新页面打开(那SPA的用户体验有什么卵用吗)

解决方案 请直接看后记

既然js动态改变不能生效 那为什么不尝试在路由切换完成后 静默加载一个空iframe动态设置title呢? 这也是加载页面的一种方式不是吗?

代码 Github

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路径或者任意存在的较小的图片即可 iframe.setAttribute( 'src', '/favicon.ico') var iframeCallback = function () { setTimeout( function () { iframe.removeEventListener( 'load', iframeCallback) document.body.removeChild(iframe) },  0) } iframe.addEventListener( 'load', iframeCallback) document.body.appendChild(iframe) } }

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')

效果

原文链接：http://www.cnblogs.com/winyh/p/6682455.html