Маршрут с именем 'na ......' не существует.$ router.push () перейти по неверному пути Vue Js - PullRequest
Новая
       25

Маршрут с именем 'na ......' не существует.$ router.push () перейти по неверному пути Vue Js

0 голосов
/ 28 сентября 2018

Я столкнулся с проблемой с некорректно работающим методом $ router.push () в vue-router.

У меня есть две страницы с одинаковыми кнопками, и эти кнопки выполняют одни и те же методы (goна страницу addToMyLibrary ().Ниже я опишу, как работают эти методы

Метод: router.push () , я использую this. $ Route.name для того, чтобыдинамически изменять свойство 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' и, конечно, Route с именем: 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
            }
          },
        ]
      }
    ],
  }]
};
...