Programing

이름이 'na......'인 경로는 존재하지 않는다.$router.push() 잘못된 경로 Vue Js로 이동

c10106 2022. 3. 30. 21:43
반응형

이름이 '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
            }
          },
        ]
      }
    ],
  }]
};

참조URL: https://stackoverflow.com/questions/52554965/route-with-name-na-does-not-exist-router-push-go-to-wrong-path-vue-j

반응형