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

我试图像下面这样设置深嵌套，我有点确定我们不能在

路由器链接中使用
精确
，用于嵌套路由

<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>

通过上述设置，当路由为：

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


/projects/：projectId/deals/：dealId/commitments/：commitmentId/edit
然后激活
承诺
我想您在
项目详细信息
中没有其他
组件添加此组件并尝试

同时从所有子路径中删除
/projects/:projectId
，就像您在父路径
路径：'/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
      }
    ]
  }
]

这是工作小提琴：

阅读更多关于

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

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
    }
]

为此而工作的小提琴：

在本例中，类<代码>路由器链接精确活动已在工作：将链接显示为活动

在您的编辑中

为什么把
放在
里面。外部只能在更换时工作，而内部的
则一文不值。在父组件中为子组件使用

此外，您的内部
没有正确关闭，就像
您可以尝试计数传递的参数一样。如果你通过2个参数，那么它的交易页面，如果3，那么它的承诺。您可以使用$route.params获取参数，然后根据这些值绑定类。您的内部
没有像
那样正确关闭，这似乎是语法错误，可能是实时演示，我们很容易回答。感谢您注意，我刚刚添加了最小工作代码，并且在我的实际代码中很好：）在我的问题中，我忘了在项目详细信息组件中添加
，但我现在已经更新了我的问题，我只有两个
路由器链接
，当我在问题中提到时，它们应该处于活动状态：
/projects/：projectId/deals/：dealId/dealId/details
然后激活交易
/projects/：projectId/deals/：commitmentId/edit
然后激活Commitments@Syed：激活是什么意思？你想这样吗？我的意思是，当路由位于
/projectd/：projectd/deals/：dealId/details
时，我想在
路由器链接中添加
activeClass=“active”
，然后激活交易和
/projects/：projectd/deals/：dealId/commitmentId/：commitmentId‌​/编辑
然后激活Commitments@Syed：如果在本例中，
router link exact-active
已在工作，为什么需要此选项：？为了便于讨论，让我们先忘掉
activeClass=“active”
，然后使用默认的
router link exact-active
。问题是我只有2个选项卡/导航项。因此，这需要有
路由器链路精确激活
或
激活
类，条件如上述注释所述。
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
    }
]