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 相关文章推荐
filemanage功能中用到的common.js
Apr 08 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
[原创]推荐10款最热门jQuery UI框架
Aug 19 Javascript
jQuery中[attribute!=value]选择器用法实例
Dec 31 Javascript
jQuery中slidedown与slideup方法用法示例
Sep 16 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
详解html-webpack-plugin用法全解
Jan 22 Javascript
微信小程序下拉框功能的实例代码
Nov 06 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 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
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
session在php5.3中的变化 session_is_registered() is deprecated in
2013/11/12 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
Javascript Tab 导航插件 (23个)
2009/06/11 Javascript
基于jquery中children()与find()的区别介绍
2013/04/26 Javascript
js的alert样式如何更改如背景颜色
2014/01/22 Javascript
javascript中字符串拼接详解
2014/09/26 Javascript
js判断手机和pc端选择不同执行事件的方法
2015/01/30 Javascript
js中函数声明与函数表达式
2015/06/03 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
bootstrap table小案例
2016/10/21 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
js 输入框 正则表达式(菜鸟必看教程)
2017/02/19 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
[04:47]DOTA2-潍坊风行电子俱乐部探秘
2014/08/08 DOTA
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
python统计日志ip访问数的方法
2015/07/06 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
python实现飞行棋游戏
2020/02/05 Python
PyCharm 2020.1版安装破解注册码永久激活(激活到2089年)
2020/09/24 Python
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
设计总监岗位职责
2013/12/07 职场文书
领导的自我鉴定
2013/12/28 职场文书
庆七一活动总结
2014/08/27 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
离婚案件原告代理词
2015/05/23 职场文书
2015年小学语文教师工作总结
2015/10/23 职场文书
python基础之while循环语句的使用
2021/04/20 Python
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python