0

I have a sidebar navigation with a "Projects" option in. In my vue-router I have the following routes defined.

/projects
/projects/:project_id

For /project this loads a list of all projects, and the /projects/:project_id should show details for a single project only. In each case, the UI fills the space, there are no shared behaviours/templating between them.

I want the "Projects" option in the sidebar to show as active, even when a user is at /projects/:project_id.

What are my options here? I am avoiding a nested child view as I don't want/need shared behaviour between them.

Joe Pavitt
  • 75
  • 1
  • 1
  • 6
  • [This documentation](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0028-router-active-link.md#unrelated-but-similiar-routes) get's me close, but only enables the rendering of the child components, not the parent as well. – Joe Pavitt Jun 14 '22 at 16:56

2 Answers2

1

You need router-link-exact-active

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0028-router-active-link.md#router-link-exact-active

example: https://codesandbox.io/s/vue-router-forked-ocxxbl?file=/src/components/Navigation.vue

Paul Tsai
  • 999
  • 7
  • 13
  • This doesn't make a `/projects` link active when at `/projects/project_id` though? – Joe Pavitt Jun 15 '22 at 08:20
  • @JoePavitt please check out the example – Paul Tsai Jun 15 '22 at 08:38
  • Thanks @Paul Tsai, that works great, although needed a minor tweak which I added [here](https://codesandbox.io/s/vue-router-forked-vtr11n?file=/src/components/Navigation.vue) to show how router-link-active is what I was needing. I should have specified though, I'm working in Vue 3 (and vue-router 4.0) and this doesn't appear to work there – Joe Pavitt Jun 15 '22 at 15:06
1

Thanks Paul Tsai for making me realise this was a Vue 3 specific problem. Realising this helped narrow down my searching, and then I found this:

Vue 3 router - router-link-active not working

Which has a working solution linked, as router-link-active is no longer calculated from the URL, but from the hierarchy defined in the Router itself.

Joe Pavitt
  • 75
  • 1
  • 1
  • 6