Vue設定頁面的title

原文地址：http://www.cnblogs.com/JimmyBright/p/7410771.html

前端框架如Vue、React等都是單頁面的應用，也就是說整個web站點其實都是一個index頁面，所謂的頁面跳轉都是替換index.html裡邊的內容，而頁面的title是在每個頁面初始化的時候才設定一次。對於現在的前端框架，傳統的每個頁面設定title標籤的做法是不行的。

下面是在Vue框架下，利用路由來設定title的思路，當然還有別的方法。

先看專案目錄

router的index.js程式碼如下：

import Vue          from 'vue'
import Router       from 'vue-router'
import signProtocol from '@/components/pages/signProtocol'
import personInfo   from '@/components/pages/personInfo'
import uploadPhoto  from '@/components/pages/uploadPhoto'
import utils        from '@/lib/utils'
Vue.use(Router)
var router= new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'uploadPhoto',
      title:'上傳身份證',
      component: uploadPhoto,
    },
    {
      path:'/personinfo',
      name:'personInfo',
      title:'提交資訊',      
      component:personInfo
    },
    {
      path:'/signprotocol',
      name:'signProtocol',
      title:'簽署協議',      
      component:signProtocol
    }
  ]
})
router.beforeEach((to, from, next) => {
  next()
});
router.afterEach((transition)=>{
  let name = transition.name
  let item = router.options.routes.filter((ele)=>{return ele.name == name})
  console.log(item[0].title)
  utils.setTitle(item[0].title)
})
export default router;

程式碼中在router中增加了引數title，在路由結束鉤子afterEach裡取到對應頁面的title，再設定上去就可以了

需要用到的utils裡的方法如下：

import axios from 'axios';
const SCREEN_WIDTH = document.body.clientWidth
const SCREEN_HEIGHT=document.body.scrollHeight
function service_sidi(url,body,successCallback,errorCallBack){
  axios.post(process.env.Host_url+url,body).then(function(result){
    successCallback(result)
  },function(error){errorCallBack(error)})
}
function service_jz(url,body,successCallback,errorCallBack){
  axios.post(process.env.Host_url+url,body).then(function(result){
    successCallback(result)
  },function(error){errorCallBack(error)})
}
function setTitle(title) {
  document.title = title
  var mobile = navigator.userAgent.toLowerCase()
  if (/iphone|ipad|ipod/.test(mobile)) {
    var iframe = document.createElement('iframe')
    iframe.style.display = 'none'
    // iframe.setAttribute('src', '')
    var iframeCallback = function () {
      setTimeout(function () {
        iframe.removeEventListener('load', iframeCallback)
        document.body.removeChild(iframe)
      }, 0)
    }
    iframe.addEventListener('load', iframeCallback)
    document.body.appendChild(iframe)
  }
}
var obj={
  service_sidi:service_sidi,
  service_jz:service_jz,
  SCREEN_WIDTH:SCREEN_WIDTH,
  SCREEN_HEIGHT:SCREEN_HEIGHT,
  setTitle:setTitle
}
export default obj;