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 相关文章推荐
基于Jquery的简单图片切换效果
Jan 06 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 Javascript
JS批量修改PS中图层名称的方法
Jan 26 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
原生js实现对Ajax的封装(仿jquery)
Jan 22 Javascript
vue-router相关基础知识及工作原理
Mar 16 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 Javascript
原生JS运动实现轮播图
Jan 02 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
解决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中去除换行解决办法小结(PHP_EOL)
2011/11/27 PHP
php中如何使对象可以像数组一样进行foreach循环
2013/08/09 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
php die()与exit()的区别实例详解
2016/12/03 PHP
php实现的二分查找算法示例
2017/06/20 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
深入理解setTimeout函数和setInterval函数
2016/05/20 Javascript
前端编码规范(3)JavaScript 开发规范
2017/01/21 Javascript
vue filters的使用详解
2018/06/11 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
JavaScript作用域链实例详解
2019/01/21 Javascript
JS中超越现实的匿名函数用法实例分析
2019/06/21 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
[33:23]Secret vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
Python利用Scrapy框架爬取豆瓣电影示例
2020/01/17 Python
美国玛丽莎收藏奢华时尚商店:Marissa Collections
2016/11/21 全球购物
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
前台接待岗位职责
2013/12/03 职场文书
进口业务员岗位职责
2014/04/06 职场文书
大专学生求职信
2014/07/04 职场文书
司机岗位职责范本
2015/04/10 职场文书
门卫管理制度范本
2015/08/05 职场文书
党员干部学习十八届五中全会精神心得体会
2016/01/05 职场文书
redis实现共同好友的思路详解
2021/05/26 Redis
浅析MongoDB之安全认证
2021/06/26 MongoDB
PHP实现两种排课方式
2021/06/26 PHP