激活具有CRUD设置的多级嵌套路由的路由器链接

Question

我试图像下面这样设置深度嵌套，而且我有点确定我们不能在exact中使用router-link中的嵌套路由。

<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/:dealId/details激活Deals

然后/projects/:projectId/deals/:dealId/commitments/:commitmentId/edit激活Commitments

Answer 1

我认为您在<router-view></router-view>组件中没有另一个ProjectDetails，请添加这个并尝试。

还从所有子路径中删除/projects/:projectId，就像您已经在父路径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/

阅读更多关于child path的信息。

如果您不需要，并且组件依赖于父级，则不要将其作为子部件直接用作根路径，如

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/

编辑中的

为什么你把<router-view>放在<router-view>里面。外部只是在被替换的时候工作，而内部的<router-view>是毫无价值的。在子组件的父组件中使用<router-view>。

另外，您的内部<router-view>没有像</router-view>那样正确地关闭。