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.
You need router-link-exact-active
example: https://codesandbox.io/s/vue-router-forked-ocxxbl?file=/src/components/Navigation.vue
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.