Vue router/Element重復(fù)點(diǎn)擊導(dǎo)航路由報(bào)錯(cuò)問題及解決
Vue router/Element重復(fù)點(diǎn)擊導(dǎo)航路由報(bào)錯(cuò)
雖然此報(bào)錯(cuò)并不會(huì)影響項(xiàng)目運(yùn)行，但是作為一個(gè)強(qiáng)迫癥的碼農(nóng)的確受不了error
解決方法如下
方法1：在項(xiàng)目目錄下運(yùn)行 npm i vue-router@3.0 -S 將vue-router改為3.0版本即可；
方法2：若不想更換版本解決方法
在router.js中加入以下代碼就可以
記住插入的位置
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
// 如果你的改了push還是沒有生效，可以考慮改replace方法
// 修改路由replace方法,阻止重復(fù)點(diǎn)擊報(bào)錯(cuò)
const originalReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function replace(location) {
return originalReplace.call(this, location).catch(err => err);
};Vue使用element-UI路由報(bào)錯(cuò)問題
Invalid prop: type check failed for prop "router". Expected Boolean, got String.
prop校驗(yàn)路由時(shí)，要求router是一個(gè)boolean類型，但是得到的是一個(gè)string類型
官網(wǎng)上router參數(shù)是boolean類型
官網(wǎng)地址： Element - The world's most popular Vue UI framework
報(bào)錯(cuò)代碼
<el-menu
router="true"
default-active="2"
class="el-menu-vertical-demo"
text-color="#5F5F60"
:collapse="isCollapse"
>
<el-menu-item index="/library/slider">
<i class="el-icon-menu"></i>
<span slot="title">首頁</span>
</el-menu-item>
</el-menu>修改方案
1、直接寫router 不要后面的true
<el-menu
router
default-active="2"
class="el-menu-vertical-demo"
text-color="#5F5F60"
:collapse="isCollapse"
>
<el-menu-item index="/library/slider">
<i class="el-icon-menu"></i>
<span slot="title">首頁</span>
</el-menu-item>
</el-menu>2、通過數(shù)據(jù)綁定
<el-menu
:router="router"
default-active="2"
class="el-menu-vertical-demo"
text-color="#5F5F60"
:collapse="isCollapse"
>
<el-menu-item index="/library/slider">
<i class="el-icon-menu"></i>
<span slot="title">首頁</span>
</el-menu-item>
</el-menu>data(){
return {
router:true
}
}以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Pinia是Vue.js的輕量級(jí)狀態(tài)管理庫,比起vue3中的Vuex狀態(tài)管理,pinia更輕量,更容易使用,下面這篇文章主要給大家介紹了關(guān)于Vue3狀態(tài)管理之Pinia的入門使用教程,需要的朋友可以參考下2022-04-04
vue獲取DOM元素并設(shè)置屬性的兩種實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄獀ue獲取DOM元素并設(shè)置屬性的兩種實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
淺談Vue使用Elementui修改默認(rèn)的最快方法
這篇文章主要介紹了淺談Vue使用Elementui修改默認(rèn)的最快方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-12-12
客戶端（vue框架）與服務(wù)器（koa框架）通信及服務(wù)器跨域配置詳解
本篇文章主要介紹了客戶端（vue框架）與服務(wù)器（koa框架）通信及服務(wù)器跨域配置詳解，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
vuex 如何動(dòng)態(tài)引入 store modules
這篇文章主要介紹了vuex 如何動(dòng)態(tài)引入 store modules，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
簡單設(shè)置el-date-picker的默認(rèn)當(dāng)前時(shí)間問題
這篇文章主要介紹了簡單設(shè)置el-date-picker的默認(rèn)當(dāng)前時(shí)間問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue-cli整合vuex的時(shí)候,修改actions和mutations,實(shí)現(xiàn)熱部署的方法
今天小編就為大家分享一篇vue-cli整合vuex的時(shí)候,修改actions和mutations,實(shí)現(xiàn)熱部署的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3純前端實(shí)現(xiàn)Vue路由權(quán)限的方法詳解
這篇文章主要給大家介紹了關(guān)于Vue3純前端實(shí)現(xiàn)Vue路由權(quán)限的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-05-05
這篇文章主要介紹了vue axios封裝以及API統(tǒng)一管理 ,需要的朋友可以參考下2019-04-04
Vue在頁面數(shù)據(jù)渲染完成之后的調(diào)用方法
今天小編就為大家分享一篇Vue在頁面數(shù)據(jù)渲染完成之后的調(diào)用方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09