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 相关文章推荐
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
iframe父页面获取子页面参数的方法
Feb 21 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
Apr 15 Javascript
微信小程序 教程之注册页面
Oct 17 Javascript
Vue2.0父组件与子组件之间的事件发射与接收实例代码
Sep 19 Javascript
JavaScript实现构造json数组的方法分析
Aug 17 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
Vue3 的响应式和以前有什么区别,Proxy 无敌?
May 20 Javascript
js实现简单的倒计时
Jan 28 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
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
PHP is_array() 检测变量是否是数组的实现方法
2016/06/13 PHP
ThinkPHP框架使用redirect实现页面重定向的方法实例分析
2018/04/12 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
JS加ASP二级域名转向的代码
2007/05/17 Javascript
javascript入门·对象属性方法大总结
2007/10/01 Javascript
javascript 写类方式之六
2009/07/05 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
jquery 防止表单重复提交代码
2010/01/21 Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
2014/06/23 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
js实现创建删除html元素小结
2015/09/30 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
详解Nuxt.js 实战集锦
2019/11/19 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
Vue Element校验validate的实例
2020/09/21 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
[01:20:37]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
python中的print()输出
2019/04/12 Python
Python 200行代码实现一个滑动验证码过程详解
2019/07/11 Python
Python实现TCP探测目标服务路由轨迹的原理与方法详解
2019/09/04 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
python 画图 图例自由定义方式
2020/04/17 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
泰国折扣酒店预订:Hotels2Thailand
2018/03/20 全球购物
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
单位未婚证明范本
2014/01/18 职场文书
英语教学随笔感言
2014/02/20 职场文书
2016年五一促销广告语
2016/01/28 职场文书
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang