vue-router动态设置页面title的实例讲解
2018-08-30 15:12
961 查看
由于用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的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- vue-router动态设置页面title
- (四)vue开发 - 根据vue-router的meta动态设置html里<title>标签的内容
- 使用vue-router设置每个页面的title方法
- 使用vue-router设置每个页面的title
- Angular 2 利用Router事件和Title实现动态页面标题的方法
- vue动态设置img的src路径实例
- vue2.0 设置router.go('/goods')会不停的刷新页面
- vue 多入口文件搭建 vue多页面搭建的实例讲解
- Angular 2 利用Router事件和Title实现动态页面标题
- 基于Vue的SPA动态修改页面title的方法
- vue中动态设置meta标签和title标签的方法
- vue-router设置页面标题
- vue-router之nuxt动态路由设置的两种方法小结
- 动态设置ASPX页面的Title值
- asp.net动态设置页面的title,meta标签
- 使用 vue-router 切换页面时怎么设置过渡动画
- Vue-router路由判断页面未登录跳转到登录页面的实例
- vue-router设置页面标题
- asp.net动态设置页面的title,meta标签
- vue 如何添加全局函数或全局变量以及单页面的title设置总结