使用CRUD设置激活具有多级嵌套路由的路由器链接 [英] Activate router-link that has multi level nested routes with CRUD setup

问题描述

我尝试设置如下所示的深度嵌套，我确信我们无法在 router-link 完全 c>用于嵌套路线。

I trying to setup deep nesting like below, and I am kinda sure about we cannot use exact in router-link for nested routes.

<div id="app">
  <nav class="nav nav-main">
    <router-link exact to="/" class="nav-link" activeClass="active">Dashboard</router-link>
    <router-link to="/projects" class="nav-link" activeClass="active">Projects</router-link>
  </nav>

  <div class="parent-content">
    <h4>Content for Parent goes here</h4>
  </div>

  <router-view>
    <nav class="nav nav-main">
      <router-link :to="'/projects/' + $route.params.projectId" class="nav-link" activeClass="active">Deals</router-link>
      <router-link :to="'/projects/' + $route.params.projectId + '/commitments/'" class="nav-link" activeClass="active">Commitments</router-link>
    </nav>
    <router-view>
      <div class="child-content">
        <h4>Content for Child goes here</h4>
      </div>
    </router-view>
  </router-view>
</div>

我的路线：

routes: [
  {
    path: '/',
    component: Dashboard
  },
  {
    path: '/projects',
    component: Projects
  },
  {
    path: '/projects/:id',
    name: 'projects-detail',
    component: ProjectDetails,
    children: [
      // DEALS
      {
        path: '/projects/:projectId/deals',
        component: Deals
      },
      {
        path: '/projects/:projectId/deals/:dealId/details',
        component: DealDetails
      },
      // COMMITMENTS
      {
        path: '/projects/:projectId/deals/:dealId/commitments/:commitmentId/edit',
        component: CommitmentEdit
      }
    ]
  }
]

通过上面的设置，我需要激活路由器链接，路线是：

/ projects /：projectId / deals /：de alId / details 然后激活交易

/ projects /：projectId / deals /：dealId /承诺/：commitmentId / edit 然后激活承诺

With the above setup, I need to activate router-links, when the route is:
/projects/:projectId/deals/:dealId/details then activate Deals
/projects/:projectId/deals/:dealId/commitments/:commitmentId/edit then activate Commitments

推荐答案

我认为你在 ProjectDetails < router-view>< / router-view> 了>组件添加此项并尝试。

I think you have not another <router-view></router-view> inside ProjectDetails component add this and try.

同样从所有子路径中删除 / projects /：projectId 在父路径路径：'/ projects /：id'，

Also remove /projects/:projectId from all child path as you have already in parent path path: '/projects/:id',

所以最终你的路线是

routes: [
  {
    path: '/',
    component: Dashboard
  },
  {
    path: '/projects',
    component: Projects
  },
  {
    path: '/projects/:id',
    component: ProjectDetails,
    children : [
      // DEALS
      {
        path: 'deals/:dealId/details',//path will be /projects/:projectId/deals/:dealId/details
        component: DealDetails
      },
      {
        path: 'deals',.// path will be /projects/:projectId/deals
        component: Deals
      },
      // COMMITMENTS
      {
        path: '/deals/:dealId/commitments/:commitmentId/edit/',
        component: CommitmentEdit
      }
    ]
  }
]

这是工作小提琴： https://jsfiddle.net/chyLjpv0/16/

了解有关 儿童路径的更多信息。

Read more about child path.

如果您不需要，而且组件依赖于父母，请不要将其直接用作子路径，如

If you need not and component depended on parent dont make it as child use directly as root path like

routes: [
  {
    path: '/',
    component: Dashboard
  },
  {
    path: '/projects',
    component: Projects
  },
  {
    path: '/projects/:id',
    component: ProjectDetails,
   },
    // DEALS
    {
      path: '/projects/:projectId/deals/:dealId/details',
      component: DealDetails
    },
    {
      path: '/projects/:projectId/deals',
      component: Deals
    },
    // COMMITMENTS
    {
      path: '/projects/:projectId/deals/:dealId/commitments/:commitmentId/edit/',
      component: CommitmentEdit
    }
]

为此工作小提琴： https://jsfiddle.net/chyLjpv0/17/

类 router-link-exact-active 已在此示例中使用： https://jsfiddle.net/chyLjpv0/18/ 将链接显示为活动

Class router-link-exact-active is already working in this example : https://jsfiddle.net/chyLjpv0/18/ to display link as active

在您的修改中

为什么要输入< rou ter-view> 在< router-view> 内。外部仅在被替换时工作，内部< router-view> 毫无价值。在子组件的父组件中使用< router-view> 。

Why you put <router-view> inside <router-view>. Outer is only working as it is being replaced and inner <router-view> is worthless. Use <router-view> in parent component for child component.

此外，您的内部< router-view> 未正确关闭，例如< / router-view>

Also your inner <router-view> is not closed properly like </router-view>

这篇关于使用CRUD设置激活具有多级嵌套路由的路由器链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！