이름이 'na......'인 경로는 존재하지 않는다.$router.push() 잘못된 경로 Vue Js로 이동
나는 vue-router의 잘못된 작업 방법 $router.push()에 대해 문제에 직면했다.
나는 동일한 단추를 가진 두 페이지가 있고 이 단추들은 동일한 방법을 실행한다(페이지 addToMyLibrary 페이지로 이동).아래에는 이러한 방법들이 어떻게 작동하는지 설명한다.
방법:router.push(), 나는 이것을 사용한다.$route.name, push() 내부의 동적 이름 속성을 변경하기 위해(다음과 다음 사이에서 변경하기 위해 필요함route.name: 'sectionDocs.search.addToMyLibrary'
그리고route.name: 'sectionDocs.view.addToMyLibrary'
현재 페이지에 따르면).
페이지에서 찾을 때/sectionDocs/search/:documentId
이 방법을 실행한 후에 우리는 페이지로 간다.path: '/sectionDocs/search/addToMyLibrary/:documentId'
, 그러나 내가 페이지에서 이 방법을 사용할 때path: 'sectionDocs/:documentId',
메서드 라우터를 실행한 후 $route.name이 잘못된 페이지로 이동하십시오.얻는 대신name:'sectionDocs.view.addToMyLibrary'
우리는 경로의 이름으로 동적 경로를 얻는다. 내 말은 페이지는$route.name: ':documentId'
물론 이름이 :documentId인 경로는 vue-router에 존재하지 않는다.
페이지로 이동해야 한다./sectionDocs/search/:documentId/addToMyLibrary/:documentId
와 함께$route.name: 'sectionDocs.view.addToMyLibrary'
"그러나 나는 그 문제를 해결할 수 없다.제발 누구라도 날 도와줘!
한 번 더 내가 그 페이지로 갈 수 있어$route.name: 'sectionDocs.view.addToMyLibrary'
URL에 올바른 경로를 입력한 경우에만/sectionDocs/search/:documentId/addToMyLibrary/:documentId
벨로우 나는 내 코드를 넣었다.
methods: {
add_to_library() {
this.$router.push({
name: this.$route.name + '.addToMyLibrary',
params: {
documentId: this.document.documentItemId,
documentType: 'LoremIpsum',
}
});
},
}
<template>
<button @click="add_to_library">Add to library</button>
</template>
라우터:
export default {
path: 'sectionDocs',
component: sectionDocs,
meta: {
requiresAuth: true,
title: 'SectionDocuments'
},
children: [{
path: '/',
component: sectionDocsSearch,
meta: {
requiresAuth: true
},
children: [{
path: '/',
name: 'sectionDocs',
component: sectionDocsDefault,
meta: {
requiresAuth: true
},
}, {
path: 'search',
name: 'sectionDocs.search',
component: sectionDocsSearchResults,
meta: {
requiresAuth: true
},
children: [
{
path: 'addToMyLibrary',
component: {
render: h => h('router-view')
},
meta: {
requiresAuth: true
},
children: [
{
path: 'success',
name: 'sectionDocs.search.addToMyLibrary.success',
component: successfulAddMessage,
meta: {
requiresAuth: true
}
},{
path: ':documentId',
name: 'sectionDocs.search.addToMyLibrary',
component: sectionDocsAddToLibrary,
meta: {
requiresAuth: true
}
}
]
}
],
}]
}, {
path: ':documentId',
name: 'sectionDocs.view',
component: sectionDocsView,
meta: {
requiresAuth: true,
dynamicRoute: true
},
children: [
{
path: 'addToMyLibrary',
component: {
render: h => h('router-view')
},
meta: {
requiresAuth: true
},
children: [
{
path: 'success',
name: 'sectionDocs.view.addToMyLibrary.success',
component: successfulAddMessage,
meta: {
requiresAuth: true
}
},{
path: ':documentId',
name: 'sectionDocs.view.addToMyLibrary',
component: sectionDocsAddToLibrary,
meta: {
requiresAuth: true
}
},
]
}
],
}]
};
'Programing' 카테고리의 다른 글
오류: 'vue-loader-v16/패키지' 모듈을 찾을 수 없음json's (0) | 2022.03.30 |
---|---|
범위 슬롯을 통해 하위 구성 요소로 양식 입력 요소를 전달하는 방법 (0) | 2022.03.30 |
행 요소 폼 행 가져오기클릭 이벤트 (0) | 2022.03.30 |
Python에서 stdout 파이핑 시 올바른 인코딩 설정 (0) | 2022.03.30 |
Vuetify에서 사용자 지정 테마를 사용하고 색 변수를 구성 요소에 전달 (0) | 2022.03.29 |