使用vue-router怎么動(dòng)態(tài)設(shè)置頁面title

今天就跟大家聊聊有關(guān)使用vue-router怎么動(dòng)態(tài)設(shè)置頁面title，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

util.js中定義setMetaTitle()函數(shù)

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'
  // 替換成站標(biāo)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
}

應(yīng)用入口main.js中調(diào)用setMetaTitle()函數(shù)

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文件調(diào)用

<h3 v-title="'頁面標(biāo)題'">通過指令設(shè)置頁面標(biāo)題</h3>

看完上述內(nèi)容，你們對使用vue-router怎么動(dòng)態(tài)設(shè)置頁面title有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。