vue 項(xiàng)目只要不是靜態(tài)頁(yè)面，一般都會(huì)和官方的路由管理器 vue-router 一起使用。

最近項(xiàng)目有一個(gè)需求，是在地址欄輸入路由，跳轉(zhuǎn)到對(duì)應(yīng)路由組件，在開發(fā)環(huán)境中這樣做是可以跳轉(zhuǎn)的，但是項(xiàng)目打包后，通過地址欄跳轉(zhuǎn)會(huì)報(bào)錯(cuò)。

因?yàn)?vue 在頁(yè)面上顯示哪個(gè)組件是根據(jù) vue-router 進(jìn)行控制的，在地址欄上直接輸入路由名稱，并不能觸發(fā) vue-router 的規(guī)則，所以只能通過監(jiān)聽地址的改變，利用回調(diào)函數(shù)在組件內(nèi)部進(jìn)行動(dòng)態(tài)修改路由。

方式一：history 模式

vue-router 默認(rèn)是 hash 模式，通過更改模式為 history 模式可以解決這個(gè)問題，但是這需要后端配合，更改服務(wù)端配置，雖然過程稍麻煩但也是一個(gè)辦法，有興趣的朋友可以查看往期文章 。

方式二：hashchange 事件

什么是 hash？

hash 就是 URL 地址中 # 字符后面的字符串。

更改它不會(huì)導(dǎo)致整個(gè)頁(yè)面重新加載，而且可以定位到元素 id 或 name 與之相同的位置（錨點(diǎn)）。

window.location.hash 可以獲取到 hash。比如 localhost:8080/#/abcde 的 location.hash="#/abcde"。

通過監(jiān)聽 hash 的狀態(tài)，來動(dòng)態(tài)修改 vue-router 的路由，是頁(yè)面進(jìn)行組件切換，這樣就不會(huì)導(dǎo)致頁(yè)面報(bào)錯(cuò)或 404 了。

當(dāng) hash 被修改時(shí)，將觸發(fā) hashchange 事件（IE8 +支持）：

window.addEventListener('hashchange',function(e) {
  console.log(e.oldURL); 
  console.log(e.newURL)
},false);

所以在 App.vue 中添加此事件：

mounted(){
  window.addEventListener('hashchange',()=>{
    var currentPath = window.location.hash.slice(1); // 獲取輸入的路由
    if(this.$router.path !== currentPath){
      this.$router.push(currentPath); // 動(dòng)態(tài)跳轉(zhuǎn)
    }
  },false);
}

這樣即可解決，在地址欄輸入路由跳轉(zhuǎn)無效問題。

補(bǔ)充：Vue路由——ie上地址欄輸入路由頁(yè)面不更新

情景：在ie11上從當(dāng)前A頁(yè)面（/a）跳轉(zhuǎn)B頁(yè)面（/b），在地址欄直接修改路由回車跳轉(zhuǎn)B頁(yè)面，發(fā)現(xiàn)頁(yè)面還是A頁(yè)面，但是地址欄地址已經(jīng)是B頁(yè)面地址。而且控制臺(tái)并無報(bào)錯(cuò)。

解決方法：在App.vue中添加判斷ie加手動(dòng)修復(fù)：

mounted () {
      if (!!window.ActiveXObject || 'ActiveXObject' in window) {
        window.addEventListener('hashchange', () => {
          let currentPath = window.location.hash.slice(1)
          if (this.$route.path !== currentPath) {
            this.$router.push(currentPath)
          }
        }, false)
      }
    }

onhashchange事件ie8就已經(jīng)支持了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論