vue跳轉(zhuǎn)同一路由報(bào)錯(cuò)的問(wèn)題及解決
更新時(shí)間：2023年04月05日 10:16:29 作者：陌路&情殤
這篇文章主要介紹了vue跳轉(zhuǎn)同一路由報(bào)錯(cuò)的問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue跳轉(zhuǎn)同一路由報(bào)錯(cuò)
vue中，如果跳轉(zhuǎn)同一個(gè)頁(yè)面路由，雖不會(huì)影響功能，但是會(huì)報(bào)錯(cuò)
原因：路由的push會(huì)向歷史記錄棧中添加一個(gè)記錄，同時(shí)跳轉(zhuǎn)同一個(gè)路由頁(yè)面，會(huì)造成一個(gè)重復(fù)的添加，導(dǎo)致頁(yè)面的報(bào)錯(cuò)
解決方案：在router的index.js中重寫vue的路由跳轉(zhuǎn)push
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err);
}編程式路由跳轉(zhuǎn)多次點(diǎn)擊報(bào)錯(cuò)問(wèn)題
使用編程式路由進(jìn)行跳轉(zhuǎn)時(shí)，控制臺(tái)報(bào)錯(cuò)，如下所示。
問(wèn)題分析
該問(wèn)題存在于Vue-router v3.0之后的版本，由于新加入的同一路徑跳轉(zhuǎn)錯(cuò)誤異常功能導(dǎo)致。
解決方法
重寫 $router.push 和 $router.replace 方法，添加異常處理。
//push
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (to) {
return VueRouterPush.call(this, to).catch(err => err)
}
//replace
const VueRouterReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace (to) {
return VueRouterReplace.call(this, to).catch(err => err)
}
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 編程式路由跳轉(zhuǎn)多次點(diǎn)擊報(bào)錯(cuò)問(wèn)題</title>
</head>
<body>
<div id="app">
<button @click="pageFirst">Page First</button>
<button @click="pageSecond">Page Second</button>
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
const First = { template: '<div>First Page</div>' } //調(diào)用路由name屬性
const Second = { template: '<div>Second Page</div>' }
routes = [
{ path:'/first', name:"first" ,component: First }, //設(shè)置路由name屬性
{ path: '/second', name:"second", component: Second }
]
router = new VueRouter({
routes
})
//push
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (to) {
return VueRouterPush.call(this, to).catch(err => err)
}
//replace
const VueRouterReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace (to) {
return VueRouterReplace.call(this, to).catch(err => err)
}
const app = new Vue({
router,
methods: {
pageFirst(){ router.push('/first') },
pageSecond(){ router.push({ name: 'second' }) },
},
}).$mount('#app')
</script>
</body>
</html>
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue如何實(shí)現(xiàn)跨頁(yè)面?zhèn)鬟f與接收數(shù)組并賦值
這篇文章主要介紹了vue如何實(shí)現(xiàn)跨頁(yè)面?zhèn)鬟f與接收數(shù)組并賦值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)雙向滑動(dòng)輸入條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue使用wavesurfer.js解決音頻可視化播放問(wèn)題
Wavesurfer.js是一款基于HTML5?canvas和Web?Audio的聲紋可視化插件，功能十分強(qiáng)大，在Vue框架中嵌入使用該插件，今天重點(diǎn)給大家介紹下vue使用wavesurfer.js解決音頻可視化播放問(wèn)題，感興趣的朋友一起看看吧2022-04-04
這篇文章主要介紹了vue之moment的使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Electron-vue腳手架改造vue項(xiàng)目的方法
這篇文章主要介紹了Electron-vue腳手架改造vue項(xiàng)目的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
Vue用v-for給循環(huán)標(biāo)簽自身屬性添加屬性值的方法
這篇文章主要介紹了Vue用v-for給循環(huán)標(biāo)簽自身屬性添加屬性值的方法，文中大家給大家列舉了三種方法 ,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了Vue對(duì)象賦值視圖不更新問(wèn)題及解決方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
vue如何使用router.meta.keepAlive對(duì)頁(yè)面進(jìn)行緩存
這篇文章主要介紹了vue如何使用router.meta.keepAlive對(duì)頁(yè)面進(jìn)行緩存問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家詳細(xì)介紹了Vue3中ref和reactive函數(shù)的使用教程，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定的幫助，需要的可以參考一下2022-07-07
vue iview多張圖片大圖預(yù)覽、縮放翻轉(zhuǎn)
這篇文章主要為大家詳細(xì)介紹了vue iview多張圖片大圖預(yù)覽、縮放翻轉(zhuǎn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07