vue-router动态设置页面title的实例讲解


Posted in Javascript onAugust 30, 2018

由于用Vue框架开发的应用是SPA(单页面应用),采用的是路由的形式,没有所谓的页面,所以想让网页的标题随着路由的改变而改变,可以使用document.title = ×××来改变网页标题。

但是在IOS APP里这种方式不起作用,原因是在IOS webview中网页标题只加载一次,动态改变是无效的。

解决方案是在路由切换完成之后,静默加载一个空的iframe动态设置title

util.js中定义setMetaTitle()函数

function setMetaTitle(title) {
 document.title = title
 let mobile = navigator.userAgent.toLowerCase()
 if (/iphone|ipad|ipod/.test(mobile)) {
  let iframe = document.createElement('iframe')
  iframe.style.display = 'none'
  // 替换成站标favicon路径或者任意存在的较小的图片即可
  iframe.setAttribute('src', 'static/img/blank.png')
  let iframeCallback = function () {
   setTimeout(function () {
    iframe.removeEventListener('load', iframeCallback)
    document.body.removeChild(iframe)
   }, 0)
  }
  iframe.addEventListener('load', iframeCallback)
  document.body.appendChild(iframe)
 }
}
 
 
export {
 setMetaTitle
}

应用入口main.js中调用setMetaTitle()函数

import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import routes from './router/router.js'
import filter from './utils/filter.js'
import { setMetaTitle } from './utils/util.js'
import App from './App.vue'
 
Vue.use(VueRouter)
Vue.use(VueResource)
 
Vue.directive('title', {
 inserted: function (el, binding) {
  setMetaTitle(binding.value)
 }
})
 
Object.keys(filter).forEach(function(k) {
 Vue.filter(k, filter[k]);
});
 
const router = new VueRouter({
 routes: routes
})
 
new Vue({
 router: router,
 render: h => h(App)
}).$mount('#app')

vue文件调用

<h2 v-title="'页面标题'">通过指令设置页面标题</h2>

以上这篇vue-router动态设置页面title的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 鼠标拖动图标技术
Feb 07 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
js判断字符长度以及中英文数字等
Dec 31 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
jQuery表单事件实例代码分享
Aug 18 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
微信小程序之自定义组件的实现代码(附源码)
Aug 02 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
Sep 07 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
js实现头像上传并且可预览提交
Dec 25 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 18 Javascript
解决vue select当前value没有更新到vue对象属性的问题
Aug 30 #Javascript
微信小程序使用wxParse解析html的实现示例
Aug 30 #Javascript
vue中rem的配置的方法示例
Aug 30 #Javascript
Vue2实时监听表单变化的示例讲解
Aug 30 #Javascript
vue-swiper的使用教程
Aug 30 #Javascript
分享vue里swiper的一些坑
Aug 30 #Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 #Javascript
You might like
用PHP产生动态的影像图
2006/10/09 PHP
我的群发邮件程序
2006/10/09 PHP
WINXP下apache+php4+mysql
2006/11/25 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
PHP中shuffle数组值随便排序函数用法
2014/11/21 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
浅谈laravel框架sql中groupBy之后排序的问题
2019/10/17 PHP
在jquery中处理带有命名空间的XML数据
2011/06/13 Javascript
jquery tab插件精简版分享
2011/09/10 Javascript
Javascript面向对象设计一 工厂模式
2011/12/20 Javascript
JS实现仿百度输入框自动匹配功能的示例代码
2014/02/19 Javascript
js的window.showModalDialog及window.open用法实例分析
2015/01/29 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
微信小程序 实例开发总结
2017/04/26 Javascript
原生JS获取元素的位置与尺寸实现方法
2017/10/18 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
JS计算距当前时间的时间差实例
2017/12/29 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
浅谈Vue render函数在ElementUi中的应用
2018/09/06 Javascript
Python实现抓取百度搜索结果页的网站标题信息
2015/01/22 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
Python实现RabbitMQ6种消息模型的示例代码
2020/03/30 Python
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
欧洲品牌瓷器餐具网上商店:Porzellantreff.de
2018/04/04 全球购物
高校十八大报告感想
2014/01/27 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
个人工作决心书
2015/09/22 职场文书
读鲁迅先生的经典名言
2019/08/20 职场文书