溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue 項目只要不是靜態頁面，一般都會和官方的路由管理器 vue-router 一起使用。
最近項目有一個需求，是在地址欄輸入路由，跳轉到對應路由組件，在開發環境中這樣做是可以跳轉的，但是項目打包后，通過地址欄跳轉會報錯。
因為 vue 在頁面上顯示哪個組件是根據 vue-router 進行控制的，在地址欄上直接輸入路由名稱，并不能觸發 vue-router 的規則，所以只能通過監聽地址的改變，利用回調函數在組件內部進行動態修改路由。
方式一：history 模式
vue-router 默認是 hash 模式，通過更改模式為 history 模式可以解決這個問題，但是這需要后端配合，更改服務端配置，雖然過程稍麻煩但也是一個辦法，有興趣的朋友可以查看往期文章 。
方式二：hashchange 事件
什么是 hash？
hash 就是 URL 地址中 # 字符后面的字符串。
更改它不會導致整個頁面重新加載，而且可以定位到元素 id 或 name 與之相同的位置（錨點）。
window.location.hash 可以獲取到 hash。比如 localhost:8080/#/abcde 的 location.hash="#/abcde"。
通過監聽 hash 的狀態，來動態修改 vue-router 的路由，是頁面進行組件切換，這樣就不會導致頁面報錯或 404 了。
當 hash 被修改時，將觸發 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); // 動態跳轉
}
},false);
}
這樣即可解決，在地址欄輸入路由跳轉無效問題。
補充：Vue路由——ie上地址欄輸入路由頁面不更新
情景：在ie11上從當前A頁面（/a）跳轉B頁面（/b），在地址欄直接修改路由回車跳轉B頁面，發現頁面還是A頁面，但是地址欄地址已經是B頁面地址。而且控制臺并無報錯。
解決方法：在App.vue中添加判斷ie加手動修復：
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就已經支持了。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
