Tengo una barra lateral de navegación con una opción de "Proyectos". En mi vue-router tengo las siguientes rutas definidas.
/projects /projects/:project_id Para /project esto carga una lista de todos los proyectos, y /projects/:project_id debería mostrar los detalles de un solo proyecto. En cada caso, la interfaz de usuario llena el espacio, no hay comportamientos/plantillas compartidos entre ellos.
Quiero que la opción "Proyectos" en la barra lateral se muestre como activa, incluso cuando un usuario está en /projects/:project_id .
¿Cuáles son mis opciones aquí? Estoy evitando una vista de niño anidado ya que no quiero/necesito un comportamiento compartido entre ellos.
Necesita enrutador-enlace-exacto-activo
ejemplo: https://codesandbox.io/s/vue-router-forked-ocxxbl?file=/src/components/Navigation.vue
Gracias Paul Tsai por hacerme darme cuenta de que este era un problema específico de Vue 3. Darme cuenta de esto me ayudó a reducir mi búsqueda, y luego encontré esto:
Enrutador Vue 3: el enrutador-enlace-activo no funciona
Que tiene una solución de trabajo vinculada, ya que router-link-active ya no se calcula a partir de la URL, sino a partir de la jerarquía definida en el propio Router.