vue地址欄直接輸入路由無(wú)效問(wèn)題的解決
vue 項(xiàng)目只要不是靜態(tài)頁(yè)面，一般都會(huì)和官方的路由管理器 vue-router 一起使用。
最近項(xiàng)目有一個(gè)需求，是在地址欄輸入路由，跳轉(zhuǎn)到對(duì)應(yīng)路由組件，在開(kāi)發(fā)環(huán)境中這樣做是可以跳轉(zhuǎn)的，但是項(xiàng)目打包后，通過(guò)地址欄跳轉(zhuǎn)會(huì)報(bào)錯(cuò)。
因?yàn)?vue 在頁(yè)面上顯示哪個(gè)組件是根據(jù) vue-router 進(jìn)行控制的，在地址欄上直接輸入路由名稱(chēng)，并不能觸發(fā) vue-router 的規(guī)則，所以只能通過(guò)監(jiān)聽(tīng)地址的改變，利用回調(diào)函數(shù)在組件內(nèi)部進(jìn)行動(dòng)態(tài)修改路由。
方式一：history 模式
vue-router 默認(rèn)是 hash 模式，通過(guò)更改模式為 history 模式可以解決這個(gè)問(wèn)題，但是這需要后端配合，更改服務(wù)端配置，雖然過(guò)程稍麻煩但也是一個(gè)辦法，有興趣的朋友可以查看往期文章 。
方式二：hashchange 事件
什么是 hash？
hash 就是 URL 地址中 # 字符后面的字符串。
更改它不會(huì)導(dǎo)致整個(gè)頁(yè)面重新加載，而且可以定位到元素 id 或 name 與之相同的位置（錨點(diǎn)）。
window.location.hash 可以獲取到 hash。比如 localhost:8080/#/abcde 的 location.hash="#/abcde"。
通過(guò)監(jiān)聽(tīng) hash 的狀態(tài)，來(lá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)無(wú)效問(wèn)題。
補(bǔ)充：Vue路由——ie上地址欄輸入路由頁(yè)面不更新
情景：在ie11上從當(dāng)前A頁(yè)面（/a）跳轉(zhuǎn)B頁(yè)面（/b），在地址欄直接修改路由回車(chē)跳轉(zhuǎn)B頁(yè)面，發(fā)現(xiàn)頁(yè)面還是A頁(yè)面，但是地址欄地址已經(jīng)是B頁(yè)面地址。而且控制臺(tái)并無(wú)報(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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue路由篇之router-view內(nèi)容無(wú)法渲染出來(lái)問(wèn)題
這篇文章主要介紹了vue路由篇之router-view內(nèi)容無(wú)法渲染出來(lái)問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要給大家介紹了關(guān)于Vue中添加滾動(dòng)事件設(shè)置的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
如何使用 Vue Router 的 meta 屬性實(shí)現(xiàn)多種功能
在Vue.js中,Vue Router 提供了強(qiáng)大的路由管理功能,通過(guò)meta屬性,我們可以在路由定義中添加自定義元數(shù)據(jù),以實(shí)現(xiàn)訪問(wèn)控制、頁(yè)面標(biāo)題設(shè)置、角色權(quán)限管理、頁(yè)面過(guò)渡效果,本文將總結(jié)如何使用 meta 屬性來(lái)實(shí)現(xiàn)這些常見(jiàn)的功能,感興趣的朋友一起看看吧2024-06-06
這篇文章主要介紹了vue-cli3中配置alias和打包加hash值操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
解決Vue axios post請(qǐng)求,后臺(tái)獲取不到數(shù)據(jù)的問(wèn)題方法
今天小編就為大家分享一篇解決Vue axios post請(qǐng)求,后臺(tái)獲取不到數(shù)據(jù)的問(wèn)題方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
基于vue框架手寫(xiě)一個(gè)notify插件實(shí)現(xiàn)通知功能的方法
這篇文章主要介紹了基于vue框架手寫(xiě)一個(gè)notify插件實(shí)現(xiàn)通知功能的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue的過(guò)濾器通常用在一些常見(jiàn)的文本格式化，過(guò)濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式。本文給大家介紹了web前端vue filter 過(guò)濾器的相關(guān)知識(shí)，感興趣的朋友一起看看吧2018-01-01
基于express中路由規(guī)則及獲取請(qǐng)求參數(shù)的方法
下面小編就為大家分享一篇基于express中路由規(guī)則及獲取請(qǐng)求參數(shù)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
詳解Unity webgl 嵌入Vue實(shí)現(xiàn)過(guò)程
Unity webgl嵌入到前端網(wǎng)頁(yè)中,前端通過(guò)調(diào)用Unity webgl內(nèi)方法實(shí)現(xiàn)需要展示的功能,前端點(diǎn)擊Unity webgl內(nèi)的交互點(diǎn),Unity webgl返回給前端一些需要的數(shù)據(jù),這篇文章主要介紹了Unity webgl 嵌入Vue實(shí)現(xiàn)過(guò)程,需要的朋友可以參考下2024-01-01
使用Bootstrap + Vue.js實(shí)現(xiàn)表格的動(dòng)態(tài)展示、新增和刪除功能
這篇文章主要介紹了使用Bootstrap + Vue.js實(shí)現(xiàn)表格的動(dòng)態(tài)展示、新增和刪除功能,需要的朋友可以參考下2017-11-11