Vue Router路由無法跳轉(zhuǎn)問題匯總
更新時間：2023年09月12日 15:45:48 作者：Dongle74
這篇文章主要介紹了Vue Router路由無法跳轉(zhuǎn)問題匯總,在這里我整理了部分Vue Router路由無法跳轉(zhuǎn)問題,結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
問題集
整理了部分Vue Router路由無法跳轉(zhuǎn)問題：
- 頂層
router-view只能被頂層路由配置內(nèi)容使用：此問題異常表現(xiàn)在路由跳轉(zhuǎn)但頁面不變 - 子路由跳轉(zhuǎn)必需父路由對應(yīng)的組件中存在
router-view：此問題異常表現(xiàn)在路由跳轉(zhuǎn)但頁面不變- 子路由配置路徑會自動繼承父路徑并自動增加
/ - 如果子路徑配置路徑存在前綴
/，則代表為全路徑，需要包含父路由路徑
- 子路由配置路徑會自動繼承父路徑并自動增加
- 跳轉(zhuǎn)路由與當(dāng)前路由相同時,即
重復(fù)路由時，會觸發(fā)NavigationDuplicated錯誤
頂層路由視圖只能頂層配置使用
<!-- App.vue -->
<template>
<div id="app">
<router-view/> <!--頂層路由視圖-->
</div>
</template>父組件
子層路由視圖，只能子路由配置可以使用，比如 /parent 路由中的children子路由配置 child
換句話說：子路由可以跳轉(zhuǎn)則必需對應(yīng)父路由的組件中村啊在 <router-view/>
<!-- Parent.vue -->
<template>
<div id="parent">
Parent Content
<router-view/> <!--關(guān)鍵點：子層路由視圖-->
</div>
</template>子組件
<!-- Child.vue -->
<template>
<div id="child">
Child Content
</div>
</template>路由配置
一級路由只能用在在頂層路由視圖，如 name=Home,Parent 等路由只能用在 App.vue 中的 <router-view/>
- 子路由只能用在父組件中的
<router-view/>中，如name=Child路由只能用在Parent.vue中的<router-view/> - 如果Child組件中仍有
<router-view/>，并且需要使用,- 則可以在
name=Child路由中繼續(xù)配置children子路由 - 或者配置新的和’name=Parent’同級別的路由配置依賴
Child.vue組件，如name=NewChild,并在其中配置children子路由
- 則可以在
// router配置
export default new Router({
routes: [
{
path: '/',
name: 'Home',
redirect:'/parent', // 可以使用App.vue中的頂層路由視圖
},
{
path: '/parent',
name: 'Parent',
component: Parent,
children: [
{
path: 'child', // 非全路徑配置時，子路徑開頭無需`/`,只需子路徑`child`
// path : '/parent/child', // 也可以配置全路徑
name: 'Child',
component: Child,
// children: [] // 如果Child組件中仍有<router-view/>，則可以繼續(xù)配置子路由
},
],
},
{
path: '/new-child',
name: 'NewChild',
component: Child,
// children: [] // 如果Child組件中仍有<router-view/>，則可以繼續(xù)配置子路由
},
],
})子路由路徑問題
- 子路由路徑以
/開頭代表全路徑配置，需要包含父路由路徑,如path:'/parent/child' - 子路由可省略
/開頭，自動繼承父路由路徑，如path:'child'上面也有代碼說明也有介紹
// router配置
export default new Router({
routes: [
{
path: '/parent',
name: 'Parent',
component: Parent,
children: [
{
path: 'child', // 非全路徑配置時，子路徑開頭無需`/`,只需子路徑`child`
// path : '/parent/child', // 也可以配置全路徑
name: 'Child',
component: Child,
},
],
},
],
})路由重復(fù)問題
vue-router 不知道哪個版本開始的問題，小編沒關(guān)心過這個，解決內(nèi)容可以參考.
當(dāng)準備跳轉(zhuǎn)的路由是當(dāng)前路由是，即假如當(dāng)前路由時 /parent ,仍舊執(zhí)行 this.$router.push('/parent') 就會報類似以下錯誤：
NavigationDuplicated: Avoided redundant navigation to current location: "/data-manage".
at createRouterError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2053:15)
at createNavigationDuplicatedError (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2023:15)
at HTML5History.confirmTransition (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2340:18)
at HTML5History.transitionTo (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2267:8)
at HTML5History.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:2613:10)
at eval (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:3043:24)
at new Promise (<anonymous>)
at VueRouter.push (webpack-internal:///./node_modules/vue-router/dist/vue-router.esm.js:3042:12)
at VueComponent.goto (webpack-internal:///./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/commons/layout/SideBar.vue:24:26)
at click (webpack-internal:///./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-3cb2454e","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/commons/layout/SideBar.vue:17:30)解決方法：
- 重寫
vue-router的push方法 - 捕獲異常并忽略：當(dāng)然也需要自己定義一個統(tǒng)一的push方法用來替換使用
this.$router.push - 自記錄當(dāng)前路徑和要跳轉(zhuǎn)的路徑，如果當(dāng)前路徑和要跳轉(zhuǎn)的路徑相同，則不跳轉(zhuǎn) 重寫push方法
在 router/index.js (在自己項目的路由配置中哈，不要非要較真~)重寫 VueRouter.push 方法
import VueRouter from 'vue-router'
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(to) {
return VueRouterPush.call(this, to).catch(err => err)
}捕獲異常并忽略
this.$router.push(url).catch(() => {})推薦提取為統(tǒng)一公共方法，如：
export const routerPush = (url) => {this.$router.push(url).catch(() => {})}判斷路徑是否為當(dāng)前路徑
如果路徑非當(dāng)前路徑才允許跳轉(zhuǎn)，否則不跳轉(zhuǎn)，同樣推薦提取為統(tǒng)一公共方法
// currentUrl存儲在內(nèi)存中
if (this.$route.path !== currentUrl) {
this.$router.push({ path: currentUrl })
}到此這篇關(guān)于Vue Router路由無法跳轉(zhuǎn)問題匯總的文章就介紹到這了,更多相關(guān)Vue Router路由無法跳轉(zhuǎn)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中的公共方法調(diào)用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
使用vue2.0實現(xiàn)自定義彈窗指令，當(dāng)標(biāo)簽有該指令時，點擊標(biāo)簽可以彈出彈窗。下面通過實例代碼給大家介紹Vue自定義彈窗指令的相關(guān)知識，感興趣的朋友一起看看吧2018-08-08
這篇文章主要給大家介紹了關(guān)于如何使用Vue進行文件預(yù)覽與打印功能的相關(guān)資料,這個功能其實也是自己學(xué)習(xí)到的,做完也有一段時間了,一直想記錄總結(jié)一下,需要的朋友可以參考下2023-10-10
本篇文章主要介紹了vue組件jsx語法的具體使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue的開發(fā)體驗還是比較愉悅的。首先文檔非常友好，所以上手會比較快。其次，配合webpack和vue-loader，每個頁面都是一個.vue文件，寫起來很方便。所以很適合做組件化開發(fā)，這篇文章我們就來一起看看webpack+vue.js如何實現(xiàn)組件化。2016-10-10
這篇文章介紹了如何克隆虛擬機,作者首先指出在克隆過程中,如果“下一步”按鈕是灰色狀態(tài),不能進行下一步操作,這時,作者建議先關(guān)閉虛擬機,然后再進行克隆操作,關(guān)閉虛擬機后,作者展示了克隆虛擬機的步驟,并給出了最終的克隆結(jié)果2026-01-01
探秘Vue異步更新機制中nextTick的原理與實現(xiàn)
nextTick?是?Vue?提供的一個重要工具,它的作用主要體現(xiàn)在幫助我們更好地處理異步操作,下面就跟隨小編一起來探索一下nextTick的原理與實現(xiàn)吧2024-02-02
Vue.set()和this.$set()使用和區(qū)別
我們發(fā)現(xiàn)Vue.set()和this.$set()這兩個api的實現(xiàn)原理基本一模一樣，那么Vue.set()和this.$set()的區(qū)別是什么，本文詳細的介紹一下，感興趣的可以了解一下2021-06-06
這篇文章主要介紹了如何利用uniapp模仿微信，實現(xiàn)一個聊天界面。文中的示例代碼講解詳細，對我們學(xué)習(xí)Vue有一定的幫助，感興趣的可以了解一下2022-01-01
這篇文章主要介紹了Vue.js 中的條件渲染指令，Vue.js 中的條件渲染指令可以根據(jù)表達式的值，來決定在 DOM 中是渲染還是銷毀元素或組件。本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11