欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

vue-router动态设置页面title的实例讲解

程序员文章站 2023-11-30 12:02:28
由于用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的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。