前言

由于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

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue