名称为“ na ......”的路由不存在。 $ router.push()转到错误的路径Vue Js

时间:2018-09-28 12:06:16

标签: javascript vue.js routes router vue-router

我在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
            }
          },
        ]
      }
    ],
  }]
};

0 个答案:

没有答案