vue-router动态设置页面title的实例讲解
程序员文章站
2023-10-23 21:20:05
由于用vue框架开发的应用是spa(单页面应用),采用的是路由的形式,没有所谓的页面,所以想让网页的标题随着路由的改变而改变,可以使用document.title = ××...
由于用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的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。