fix(NcListItem): Bring back correct href for router-link links

[raimund-schluessler]

This brings back the correct href for the link in NcListItem and NcAppNavigationItem that got erroneously removed with #3775. Closes #3921.

Tested with Talk master and the links show up again.

[raimund-schluessler]

Still needs a tweak as links now open in a new tab by default.

[ShGKme]

It seems, we don't use snake_case for variable names.

href_router -> routerLinkHref ?

[raimund-schluessler]

Still needs a tweak as links now open in a new tab by default.

Fixed. target and rel only took the hrefprop into account and not the href coming from router-link.

However, the link now behaves as a normal link and reloads the page. Still needs fixing.

[raimund-schluessler]

It seems, we don't use snake_case for variable names.

href_router -> routerLinkHref ?

Fine with me.

[ShGKme]

However, the link now behaves as a normal link and reloads the page. Still needs fixing.

@click="onClick" -> @click.prevent="onClick" ?

[raimund-schluessler]

However, the link now behaves as a normal link and reloads the page. Still needs fixing.

@click="onClick" -> @click.prevent="onClick" ?

Yes, but only if it's a router-link a. I test it right now, but building Talk takes ages here 🙈

[raimund-schluessler]

Seems to work as it should now.

[raimund-schluessler]

I checked it with Talk and Tasks now and both NcListItem and NcAppNavigationItem work correctly now.

[skjnldsv]

Code make sense

[nickvergessen]

Fixes talk again and the explanations make sense

[st3iny]

@raimund-schluessler I just noticed that there might a bug in this PR:

routerLinkHref is not defined in the NcListItem component. It is only used in some places. Could you elaborate on where the item is coming from?

$ rg routerLinkHref src/components/NcListItem/NcListItem.vue
25:             v-slot="{ href: routerLinkHref, navigate, isActive }"
33:                             :href="routerLinkHref || href"
43:                             @click="onClick($event, navigate, routerLinkHref)"
299:            onClick(event, navigate, routerLinkHref) {
304:                    if (routerLinkHref) {

PS: I'm currently trying to debug a major regression from #3775 (comment)

[ShGKme]

routerLinkHref is not defined in the NcListItem component. It is only used in some places. Could you elaborate on where the item is coming from?

routerLinkHref don't have to be defined in NcListItem. It is renamed slot prop (aka slot rendering function parameter). This code is close to this JS equivalent:

const href // href from prop
function renderSlot({ href: routerLinkHref, navigate, isActive  } = {}) {
  return h('a', { attrs: { href: routerLinkHref || href } })
}

When is === RouterLink, v-slot takes href value from the Routerlink, then it is renamed as function param to routerLinkHref and used in rendering.

When is === 'a', v-slot takes undefined, routerLinkHref is undefined and routerLinkHref || href uses href component prop.

[st3iny]

That makes sense. Thanks for the explanation.

I found the problem: to.exact is not honored. Instead, I have to provide the :exact prop manually.

Ref https://v3.router.vuejs.org/api/#exact

[st3iny]

From my perspective this is a breaking change because it was honored in 7.8.0 and we should fix it.

It turns out that exact is a prop of router-link and a fix in mail is sufficient. I have no idea how it worked at all before 😅