javascript - Activate router-link that has multi level nested routes with CRUD setup - Stack Overflow

admin管理员组

文章数量:1287190

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 + '/mitments/'" 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>

My Route:

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

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/mitments/:mitmentId/edit then activate Commitments

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 + '/mitments/'" 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>

My Route:

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

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/mitments/:mitmentId/edit then activate Commitments

• javascript
• vue.js
• vue-router

Share Improve this question Follow edited Nov 4, 2017 at 14:22 Syed asked Oct 28, 2017 at 7:17 SyedSyed 16.5k1414 gold badges126126 silver badges157157 bronze badges 3

• You could try to count passed parameters. If you pass 2 args then its Deals page, if 3 then its Commitments. You can get parameters by using $route.params, then just bind class depending on these values. – El Danielo Commented Oct 31, 2017 at 10:57
• Your inner <router-view> is not closed properly like </router-view>, It seems syntax error, Might be live demo would be easy for us to answer. – Niklesh Raut Commented Nov 4, 2017 at 4:27
• thanks for noting that, I have just added minimum working code and its fine in my actual code :) – Syed Commented Nov 7, 2017 at 5:06

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9 +50

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

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

So final you route would be

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

Here is working fiddle : https://jsfiddle/chyLjpv0/16/

Read more about child path.

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

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

Working fiddle for this : https://jsfiddle/chyLjpv0/17/

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

In your edit

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 ponent for child ponent.

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

本文标签： javascriptActivate routerlink that has multi level nested routes with CRUD setupStack Overflow