问题:
在iOS的微信中 一个SPA应用 想要改变微信顶部导航栏的标题 使用
document.title = xxx来改变网页标题是无效的原因大致就是因为在微信中webview只加载网页标题一次 动态改变是无效的 除非都以新页面打开(那SPA的用户体验有什么卵用吗)
解决方案:
- 既然js动态改变不能生效 那为什么不尝试在路由切换完成后 静默加载一个空iframe动态设置title呢?
Vuejs 2.x
npm install vue-wechat-title --save
Main.js
Vue.use(require('vue-wechat-title'))
路由定义
routes: [
{
path: '/',
name: 'index',
meta: {
title: '首页'
},
component: Index
},
]
App.vue 建议全局只使用一次该指令 标题可用vuex或者router中定义 不要多处使用!!
<!-- 任意元素中加 v-wechat-title 指令 建议将标题放在 route 对应meta对象的定义中 -->
<div v-wechat-title="$route.meta.title"></div>
<!--or-->
<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>