我在vue-router中遇到工作方法 $ router.push()错误的问题。
我有两个页面具有相同的按钮,并且这些按钮执行相同的方法(转到页面addToMyLibrary页面)。下面我描述这些方法的工作原理
方法: router.push(),我使用 this。$ 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的Route在vue-router中不存在。
我需要通过/sectionDocs/search/:documentId/addToMyLibrary/:documentId
转到页面$route.name: 'sectionDocs.view.addToMyLibrary'
,但是我无法解决问题。请任何人帮助我!
只有在网址$route.name: 'sectionDocs.view.addToMyLibrary'
中输入正确的路径,我才能进入页面/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
}
},
]
}
],
}]
};