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

Posted 2023-02-22

【中文标题】使用 CRUD 设置激活具有多级嵌套路由的路由器链接

【英文标题】：Activate router-link that has multi level nested routes with CRUD setup

【发布时间】：2018-04-09 18:45:10

【问题描述】：

我尝试像下面那样设置深度嵌套，我有点确定我们不能在 router-link 中使用 exact 来进行嵌套路由。

<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

【问题讨论】：

您可以尝试计算传递的参数。如果您传递 2 个参数，那么它的交易页面，如果 3 则它的承诺。您可以使用 $route.params 获取参数，然后根据这些值绑定类。

您的内部<router-view> 没有像</router-view> 那样正确关闭，似乎语法错误，可能是现场演示，我们很容易回答。

感谢您注意到，我刚刚在我的实际代码中添加了最低工作代码和它的罚款 :)

【参考方案1】：

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

同时从所有子路径中删除 /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> 那样正确关闭

【讨论】：

在我的问题中，我忘记在项目详细信息组件中添加<router-view></router-view>，但我现在已经更新了我的问题，我只有两个router-link，当如中所述时它们应该处于活动状态和非活动状态我的问题：/projects/:projectId/deals/:dealId/details 然后激活交易 /projects/:projectId/deals/:dealId/commitments/:commitmentId/edit 然后激活承诺

@Syed：你说的激活是什么意思？你想要这样吗jsfiddle.net/chyLjpv0/18

我的意思是我喜欢在路由位于/projects/:projectId/deals/:dealId/details 时将activeClass="active" 添加到router-link 然后激活Deals 和/projects/:projectId/deals/:dealId/commitments/:commitmentId‌​/edit 然后激活Commitments

@Syed ：如果router-link-exact-active 已经在这个例子中工作，为什么你需要这个：jsfiddle.net/chyLjpv0/18 ？

为了讨论，让我们忘记activeClass="active" 并使用默认的router-link-exact-active。问题是我只有 2 个选项卡/导航项。所以，这个需要有router-link-exact-active 或active 类，条件如上评论所述。