Show nested URL as active in vue-router, when not a child view

Question

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.

Answer 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

Answer 2

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.