What is the difference between router-link-active and router-link-exact-active?

[yoshi-pi]

Reproduction

https://jsfiddle.net/yoshipy/v7t2nrm5/27/

Steps to reproduce the bug

Check the color of To /parent/1 link.

Expected behavior

The color should be red. This is because, according to the RFC about active matching listing the difference between "router-link-active" and "router-link-exact-active", if the current route is "/parent/1/child/2", then /parent/1 should be active.

Actual behavior

The color is blue

Additional information

Or is that RFC outdated? What is the exact difference between router-link-active and router-link-exact-active?

[posva]

It's because you have duplicated id (like in the RFC), which is not valid. This works:

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/parent/:id',
    	component: Home,
    	children: [
    	{path: '', component: Foo},
      {path: 'child/:id2', component: Bar},
      {path: 'child-second/:id2', component: Baz}
    ] },
  ],
})

BTW you can check the console for warnings, in this case the router points you to it.