十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
今天就跟大家聊聊有关使用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有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。