时间戳

首页 > 解决方案 > Vue中从子组件导航到父组件

vue.js - Vue中从子组件导航到父组件

问题描述

我有一个有几个孩子的父组件：

  // more routes here

  {
    path: '/organisatie',
    name: 'Organisation',
    meta: { breadCrumb: 'Organisatie' },
    component: () => import(/* webpackChunkName: "organisations" */ '../views/Organisation.vue'),
  },
  {
    path: '/personen',
    component: () => import(/* webpackChunkName: "people" */ '../views/People.vue'),
    children: [
      {
        path: '/',
        name: 'People',
        component: () => import(/* webpackChunkName: "listpeople" */ '../views/ListPeople.vue'),
        meta: { breadCrumb: 'Personen' },
      },
      {
        path: '/personen/:id',
        name: 'Person',
        component: () => import(/* webpackChunkName: "person" */ '../views/Person.vue'),
        meta: { breadCrumb: 'Persoon' },
        children: [
          {
            path: '/personen/:id/edit',
            name: 'Edit-user',
            component: () => import(/* webpackChunkName: "editperson" */ '../views/EditPerson.vue'),
            meta: { breadCrumb: 'Bewerken' },
          },
        ],
      },
    ],
  },

我可以导航到mywebsite.com/personen/id. 但是，如果我通过路由器链接转到另一个页面，比如“organisatie”，则 URL 将变为mywebsite.com/personen/organisatie而不是mywebsite.com/organisatie.

我该如何防止这种情况发生？

编辑：我正在使用来自Vue 语言路由器的自定义组件，我将链接动态添加到：<localized-link to="item.link"></localized-link>

items: [
  { link: 'organisatie'},
]

标签： vue.jsvue-router

解决方案

我认为在子路径中重复父路径不是一个好主意。这是嵌套路由的示例； https://router.vuejs.org/guide/essentials/nested-routes.html

你可以试试下面的代码吗？当然，您也应该修复路由器链接。

// more routes here

  {
    path: '/organisatie',
    name: 'Organisation',
    meta: { breadCrumb: 'Organisatie' },
    component: () => import(/* webpackChunkName: "organisations" */ '../views/Organisation.vue'),
  },
  {
    path: '/personen',
    component: () => import(/* webpackChunkName: "people" */ '../views/People.vue'),
    children: [
      {
        path: '/',
        name: 'People',
        component: () => import(/* webpackChunkName: "listpeople" */ '../views/ListPeople.vue'),
        meta: { breadCrumb: 'Personen' },
      },
      {
        path: '/:id',
        name: 'Person',
        component: () => import(/* webpackChunkName: "person" */ '../views/Person.vue'),
        meta: { breadCrumb: 'Persoon' },
        children: [
          {
            path: '/:id/edit',
            name: 'Edit-user',
            component: () => import(/* webpackChunkName: "editperson" */ '../views/EditPerson.vue'),
            meta: { breadCrumb: 'Bewerken' },
          },
        ],
      },
    ],
  },

推荐阅读