Vue 라우팅 점프 문제를 요약하는 예제 튜토리얼

이 글은 주로 Vueroutingjump 문제 기록에 대한 자세한 설명을 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 에디터를 따라가서 살펴볼까요

최근 프로젝트에서 Vue를 사용하여 라우팅을 사용할 때 다음과 같은 문제가 발생했습니다.

라우팅 설정은 다음과 같습니다:

{

path:'/tab',

component:Tab,

children:[{

path:'layoutList',

name:'LayoutList',

component:LayoutList

},{

path:'layoutView/:layoutId',

name:'LayoutView',

component:LayoutView

},{

path:'layoutDetail/:viewId',

name:'LayoutDetail',

component:LayoutDetail

}]

}

여기서 /tab은 루트 주소이고 3개의 하위 주소가 있으며 3개의 하위 주소 수준은 다음과 같습니다. LayoutList => LayoutView => LayoutDetail

정상적인 상황: 현재 경로는 /tab/layoutList입니다. LayoutView 페이지로 이동해야 하는 경우 router.push({path:'layoutView/'+item.id})를 사용할 수 있습니다.

점프 후 경로는 /tab/layoutView입니다. /1

I LayoutView 페이지에서 해당 LayoutDetail 페이지로 점프하고 싶을 때:

상황 1: (페이지를 찾을 수 없음)

점프 전 주소: /tab/layoutView/ 1

점프 코드: router.push({ 경로:'layoutDetail/'+item.id});

점프 후 주소:/tab/layoutView/layoutDetail/27

사례 2: (페이지를 찾을 수 없음)

점프 전 주소:/tab /layoutView/1

점프 코드: router.push({경로:'/layoutDetail/'+item.id});

점프 후 주소:/layoutDetail/27

Case 3: (찾을 수 없는 페이지)

점프 전 주소:/tab/layoutView/1

점프 코드: router.push({path:'tab/layoutDetail/'+item.id});

점프 후 주소 :/ tab/layoutView/tab/layoutDetail/27

사례 4: (페이지가 정상적으로 표시됩니다)

점프 전 주소: /tab/layoutView/1

점프 코드: router.push({경로:' /tab /layoutDetail/'+item.id});

점프 후 주소 : /tab/layoutDetail/27

케이스 4의 동작을 따라야만 페이지가 정상적으로 표시될 수 있습니다.

vue 라우팅은 푸시 주소를 기준으로 합니다. 주소가 /로 시작하지 않으면 현재 경로의 마지막 / 뒤에 있는 주소를 직접 대체합니다.

주소가 /로 시작하면 다음으로 이동합니다. push의 주소를 절대 주소로 사용합니다.

그리고 router.go({name:'LayoutDetail',params:{viewId:item.id}})를 사용해 보았는데 페이지가 점프하지 않고 주소도 바뀌지 않습니다.

위 내용은 Vue 라우팅 점프 문제를 요약하는 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!