Vue中从子组件导航到父组件

Posted 2023-02-22

【中文标题】Vue中从子组件导航到父组件

【英文标题】：Navigating from child component to parent component in Vue

【发布时间】：2020-11-10 17:03:16

【问题描述】：

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

  // 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 Language Router 的自定义组件，我将链接动态添加到：<localized-link to="item.link"></localized-link>

items: [
   link: 'organisatie',
]

【问题讨论】：

你如何使用router-link？

尝试<router-link to="/organisatie" /> 或不带斜线 (/) 即<router-link to="organisatie" />

@User28 查看我的编辑。

您应该始终以/ 开头网址，所以它应该是 link: '/organisatie' 。或者使用名称items: [ name: 'Organisation' ] 和:to="item"。

@User28 好的，我更改了它并解决了我的问题，谢谢！

【参考方案1】：

我认为在子路径中重复父路径不是一个好主意。 这是嵌套路由的示例； 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' ,
          ,
        ],
      ,
    ],
  ,

【讨论】：

我这样做了，所以 URL 是 mywebsite/personen/id 如果我按照 URL 上方的方式进行操作，则 URL 是 mywebsite/id。

@deRaaf 你的意思是当你导航的时候？如果是，我认为问题在于您如何导航而不是如何定义路线。

你能发布你的路由器链接命令吗？