vue 单页面动态切换标题
切换标题可以用 document.title 但是百度说 ios 的不支持 其实 IOS: 微信 6.5.3 版本 在 17 年 3 月, 切换了 WKwebview, 可以直接 document.title 修改, 微信开发工具: 目前支持 document.title 修改, 偶尔不能修改成功. 不过这个影响不那么大了.
对于插件
vue-wechat-title 我想吐槽一下
如果不了解的先百度下, 具体作用是动态加载 title, 但是有一个巨大的问题, 每当你更新以后他会默认重新加载你的 html, 就等于把 html + 当前路由重新执行一次, 这样就会重复执行一个页面两次, 这种问题, mdn 还未说明!
解决方案
如果你觉得每个页面都写 title 有点麻烦, 然而又不能忍受 vue-wechat-title 的垃圾 就用一下方法
找到 vue-router 路由地址, 添加一个 beforeEach 然后动态更改 大致代码如下
- const router = new Router({
- routes: [{ path: '/', meta: { title: '长策天下'}, component: resolve => require(['../view/index/index.vue'], resolve) }, // 我
- { path: '/iFamily', meta: { title: '我和家人' }, component: resolve => require(['../view/iFamily/index.vue'], resolve) }
- ]
- })
- router.beforeEach((to, from, next) => {
- document.title = to.meta.title
- next()
- })
这只是部分代码 如果不明白 beforeEach 的作用请百度! 本文章只提供解决方案! 谢谢
来源: http://www.qdfuns.com/article/38308/3837287abcb7dcb3c9a87255484ab099.html