Vue項目代碼改進(四)—— 在使用ElementUI時點擊同一個路由,頁面報錯

在這里插入圖片描述

這個不可描述的問題是:在使用ElementUI時點擊同一個路由,頁面報錯。
錯誤代碼如下:

element-ui.common.js?ccbf:3339 NavigationDuplicated {_
name: "NavigationDuplicated", 
name: "NavigationDuplicated", 
message: "Navigating to current location ("/users") is not allowed", 
stack: "Error?    at new NavigationDuplicated (webpack-int…e_modules/element-ui/lib/mixins/emitter.js:29:22)"}

問題描述出來就好辦了,查詢后修改router/index.js代碼,增加:

const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {return originalPush.call(this, location).catch(err => err)
}

搞掂 😃
…沒搞掂,還沒看懂為什么這么寫呢…接下來查了幾篇分析文章:

1.原因分析

Vue-router在3.1之后把$router.push()方法改為了Promise。所以假如沒有回調函數,錯誤信息就會交給全局的路由錯誤處理,因此就會報上述的錯誤。

“如果仔細觀察并復現了多次錯誤便會發現,vue-router是先報了一個Uncaught (in promise)的錯誤(因為push沒加回調),然后再點擊路由的時候才會觸發NavigationDuplicated的錯誤(路由出現的錯誤,全局錯誤處理打印了出來)”
—— 保留,我沒出現Uncaught (in promise)的錯誤。

2.解決方案

方案一:禁止全局路由錯誤處理打印,這個也是vue-router開發者給出的解決方案,,就是上面的代碼。

方案二:需要為每個router.push增加回調函數。對于我們來說這個解決方案的成本可能很高,但是是值得的。在vue-router 3.1版本之前的push調用時不會返回任何信息,假如push之后路由出現了問題也不會有任何的錯誤信息。如果你使用方案1固定了vue-router的版本,那么以后的項目需要路由的回調時你根本無從下手。

router.push('/location').catch(err => {err})

歷史回顧:
如果你使用了Element-UI,并且方案一無法解決你的問題。那么你只能固定vue-router版本到3.0.7以下。這是因為Element-UI的el-menu在重復點擊路由的時候報的錯誤,而且這個錯誤是Element-UI內部的路由問題,你無法通過方案一和二去解決。只能選擇暫時不升級Vue-router。
好消息是Element-UI已經有了解決方案,預計在2.13.0版本會解決這個問題。
而項目現在使用的恰是2.13.0版本,因此不存在這個問題 😃
element-ui版本

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/251407.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/251407.shtml
英文地址,請注明出處:http://en.pswp.cn/news/251407.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

es6 --- Proxy的屬性(get、set除外)

apply(): 攔截函數的調用、call和apply操作 var target function () { return I am the target;}; var handler {apply: function () {reuturn I am the proxy;} };var p new Proxy(target, handler); p(); // " I am the proxy"has(): 判斷對象是否…

關于jQuery對象(類數組對象)以及DOM對象相互轉化問題——[object Object]和[object HTMLInputElement]

之前在某官網課程上看有關jQuery和bootstrap的相關教程,有一節課是教我們如何制作價格菜單的按鈕以及總價問題 選中按鈕,按鈕樣式會發生變化,右上角價格會自動運算 6個菜單的html結構差不多,先貼出一個菜單的html,如下…

如何去掉bootstrap table中表格樣式中橫線豎線

修改之前,表格看上去比較擁擠,因為bootstrap table插件中自帶斑馬線表格樣式,有橫線和豎線分欄,現在我們不需要這些。應UI設計的要求,要去掉中間的橫線和豎線,使用了修改需求中一種簡單粗暴的修改方法&…

啟用系統登錄失敗處理功能

啟用登錄失敗處理功能(限制非法登錄次數,用戶遠程登錄ssh失敗超過N次,鎖定用戶,并設置解鎖時間) 配置: 在第一行#%PAM-1.0的下面,即第二行,添加如下方代碼,一定要寫第二行…

Vue項目代碼改進(五)—— 將側邊欄菜單改造為動態后,如何按需顯示不同圖標

將側邊欄菜單改造為動態后&#xff0c;目前側邊欄每項的小圖標都相同 <el-aside class"aside" width"200px"><el-col :span"24"><el-menudefault-active"2"class"el-menu-vertical-demo"open"handleOpe…

es6 --- Reflect的靜態方法

Reflect.get(target, name, receiver): 查找并返回 target對象的 name屬性,若沒有,返回undefined var myObject {foo: 1,bar: 2,get baz() {return this.foo this.bar;}, }Reflect.get(myObject, foo); // 1// 若name屬性部署了讀取函數(getter),則讀取函數的this 綁定rece…

POJ3278——Catch That Cow

Catch That CowTime Limit: 2000MS Memory Limit: 65536KTotal Submissions: 114140 Accepted: 35715Description Farmer John has been informed of the location of a fugitive cow and wants to catch her immediately. He starts at a point N (0 ≤ N ≤ 100,000) on a nu…

canvas畫出簡陋版隨鼠標轉動眼睛且會眨眼的可愛櫻桃小丸子

可到我的github上下載文件 需求&#xff1a; 剛加載時鼠標不移動&#xff0c;眼睛會不停地眨眼眼球會跟隨鼠標移動而移動鼠標不移動時恢復眨眼效果提示&#xff1a; 除了眼睛是動態以外&#xff0c;其他靜態繪制都在static()函數中利用橢圓的短軸長度先變短后恢復長度來模擬…

poj 2049(二分+spfa判負環)

poj 2049&#xff08;二分spfa判負環&#xff09; 給你一堆字符串&#xff0c;若字符串x的后兩個字符和y的前兩個字符相連&#xff0c;那么x可向y連邊。問字符串環的平均最小值是多少。1 ≤ n ≤ 100000&#xff0c;有多組數據。 首先根據套路&#xff0c;二分是顯然的。然后跑…

Vue學習筆記(一)—— 什么時候需要import Vue from 'vue'

一、當執行 import vue from ‘vue’ 時發生了什么&#xff1f; 其實在 node.js 中&#xff0c;執行 import 就相當于執行了 require&#xff0c;而 require 被調用&#xff0c;就會用到 require.resolve 這個函數來查找包的路徑&#xff0c;而這個函數在 nodejs 中會有一個關于…

es6 --- 用promise對象實現Ajax操作的一個實例

首先回顧一下Ajax請求的步驟 var client new XMLHttpRequest(); client.open("GET", url); client.onreadystatechange handler; client.responseType "json"; client.setRequestHeader("Accept", "application/json"); client.s…

Windows 64 位 mysql 5.7以上版本包解壓中沒有data目錄和my-default.ini以及服務無法啟動的解決辦法以及修改初始密碼的方法...

LZ初學SQL&#xff0c;本來以為開源的安裝很簡單&#xff0c;但是中間出現了一些問題&#xff0c;記錄下來&#xff0c;希望能幫助到他人。 mysql官網下載地址&#xff1a;https://dev.mysql.com/downloads/mysql/點擊打開鏈接 以5.7.20版本為例 首先安裝包解壓后&#xff0c;沒…

總結 構造函數與非構造函數 原型繼承的一個方法

這兩天真的一直在看原型以及繼承之間的千絲萬縷&#xff0c;哇&#xff0c;收獲頗多&#xff0c;不過所謂溫故知新&#xff0c;還是要多復習復習知識點&#xff0c;才能察覺那些之前不易發現的小小sparkle 真心推薦MDN文檔——對象原型&#xff0c;JavaScript 中的繼承&#x…

【深度學習】caffe 中的一些參數介紹

一個優秀的算法工程師51%的時間在調參數&#xff0c;48%的時間在測試模型&#xff0c;剩下的1%時間再寫代碼。段子雖然是網上看來的&#xff0c;但調參數是真的心碎。像我這樣的小萌新更是覺得無從下手。只有知己知彼&#xff08;了解每個參數的含義&#xff09;&#xff0c;才…

Vue學習筆記(二)—— vue項目中使用axios

一、文檔鏈接 axios文檔 vue開發插件 二、axios 簡介 axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端&#xff0c;它本身具有以下特征&#xff1a; 從瀏覽器中創建 XMLHttpRequest 從 node.js 發出 http 請求 支持 Promise API 攔截請求和響應 轉換請求和響應…

es6 --- promise.prototype.then的鏈式引用

很多時候,我們需要使用ajax請求獲取數據A.并使用A中的數據A.a來進行下一步的Ajax操作… 下面使用promise.prototype.then的鏈式引用來實現 // 首先封裝一個getJSON的方法. var getJSON function (url) {var promise new Promise(function (resolve, reject) {var client ne…

jquery對json 鍵值對或數組的增加、刪除、遍歷操作

在前端遍歷json鍵值對或數組遍歷的情況也會經常用到&#xff0c;我們知道在java、c#其它的語言里提供方便的方法來操作&#xff0c;那么在json里面有沒有類似的方法呢&#xff0c;廢話就不多說了上代碼&#xff1a;var jsonStr{}; //增加 jsonStr["name1"]"yu&q…

廖雪峰老師Git教程代碼梳理

建立版本庫 創建一個版本庫非常簡單&#xff0c;首先&#xff0c;選擇一個合適的地方&#xff0c;創建一個空目錄&#xff08;repository&#xff09;&#xff1a; $ mkdir learngit //創建learngit目錄 $ cd learngit //切換當前目錄為learngit目錄 $ pwd //用于顯示當…

BZOJ2006 [NOI2010]超級鋼琴 【堆 + RMQ】

2006: [NOI2010]超級鋼琴 Time Limit: 20 Sec Memory Limit: 552 MBSubmit: 3446 Solved: 1692[Submit][Status][Discuss]Description 小Z是一個小有名氣的鋼琴家&#xff0c;最近C博士送給了小Z一架超級鋼琴&#xff0c;小Z希望能夠用這架鋼琴創作出世界上最美妙的音樂。 這…

Vue項目代碼改進(六)—— vue的mixins的使用

混入可以將不同組件的共同內容部分在一個混入對象中展示&#xff0c;然后通過在組件實例中混入這個對象&#xff0c;這樣擁有這些屬性的組件都可以調用 混入對象中的屬性名跟組件中的屬性名沖突時&#xff0c;以組件自身的為基準 舉例&#xff1a;單文件組件users.vue 1&#x…