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 相关文章推荐
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
Nov 01 Javascript
vue项目配置使用flow类型检查的步骤
Mar 18 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 Vue.js
node中短信api实现验证码登录的示例代码
Jan 20 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
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
JS实现自动阅读单词(有道单词本添加功能)
2016/11/14 Javascript
详解nodejs微信公众号开发——5.素材管理接口
2017/04/11 NodeJs
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
Vue自定义事件(详解)
2017/08/19 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
jQuery zTree 异步加载添加子节点重复问题
2017/11/29 jQuery
EasyUI的DataGrid绑定Json数据源的示例代码
2017/12/16 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
vue3+typeScript穿梭框的实现示例
2020/12/29 Vue.js
[01:04:02]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第二场 1月24日
2021/03/11 DOTA
pycharm远程linux开发和调试代码的方法
2018/07/17 Python
Pandas中resample方法详解
2019/07/02 Python
python3.6+selenium实现操作Frame中的页面元素
2019/07/16 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
中国最大的名表商城:万表网
2016/08/29 全球购物
YII2 全局异常处理深入讲解
2021/03/24 PHP
土木工程应届生自荐信
2013/09/24 职场文书
生产厂厂长岗位职责
2013/12/25 职场文书
小学岗位竞聘方案
2014/01/22 职场文书
中学生2014国庆节演讲稿:不屈的民族
2014/09/21 职场文书
骨干教师个人总结
2015/02/11 职场文书
雷锋的观后感
2015/06/10 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
100句人生哲理语录集锦:强者征服今天,懒汉坐等明天
2019/10/18 职场文书
Mysql 设置boolean类型的操作
2021/06/04 MySQL
68行Python代码实现带难度升级的贪吃蛇
2022/01/18 Python
一文弄懂MySQL索引创建原则
2022/02/28 MySQL
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记