大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
今天就跟大家聊聊有关使用vue-router怎么动态设置页面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文件调用
通过指令设置页面标题
看完上述内容,你们对使用vue-router怎么动态设置页面title有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。