溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Vue項目中IE11地址欄直接改變路由頁面不跳轉bug怎么解決的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇Vue項目中IE11地址欄直接改變路由頁面不跳轉bug怎么解決文章都會有所收獲，下面我們一起來看看吧。
bug描述:
使用vue-cli搭建的項目, vue-router控制路由.
兼容谷歌 火狐 IE11及IEedge.
在谷歌 火狐 IEedge的地址欄直接改變路由地址, 回車的話, 路由頁面能夠刷新到響應路由界面.
但是在IE11中, 地址欄雖然改變了, 但頁面卻沒有任何變化.
舉個栗子
項目有主頁, 路由1 和路由2 單個路由組成. 可在三個路由間任意跳轉. 如下圖.
正常瀏覽器: 不通過點擊按鈕, 而是直接在地址欄中改變路由, 界面是可以正常切換的.
IE11瀏覽器: bug就出現在不正常的IE瀏覽器中, 無論你怎么改變地址欄內的路由, 界面是不會變化的.
解決辦法:
在app.vue中, 先判斷是IE瀏覽器, 是的話, 給window綁定一個哈希值變化的事件, 當哈希值發生變化時, 將通過$router.path獲取當前界面的路由, 與地址欄中的改變的哈希值就行比較, 如果不同, 就調用vue-router的push方法, 人為的去改變路由. 上代碼:
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);
}
}
關于“Vue項目中IE11地址欄直接改變路由頁面不跳轉bug怎么解決”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“Vue項目中IE11地址欄直接改變路由頁面不跳轉bug怎么解決”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
