Links doesn't work properly with history: createWebHistory about coreui-free-vue-admin-template HOT 5 CLOSED

In AppSidebarNav.js code is look like this:

{
	default: (props) => h(
		resolveComponent(item.component),
		{
			active: props.isActive,
			href: props.href,
			onClick: () => props.navigate(),
		},
		{
			default: () => [
			item.icon &&
				h(resolveComponent('CIcon'), {
				customClassName: 'nav-icon',
				name: item.icon,
				}),
			item.name,
			item.badge &&
				h(
				CBadge,
				{
					class: 'ms-auto',
					color: item.badge.color,
				},
				{
					default: () => item.badge.text,
				},
				),
			],
		},
	),
},

You can customize the child item using render function h. Here is my code that does the trick:

{
	default: (props) => h(
		resolveComponent(item.component),
		{
			active: props.isActive,
		},
		{
			default: () =>  h(
				RouterLink,
				{
					to: props.href,
					class: 'nav-link',
					onClick: () => props.navigate(),
				},
				{
					default: () => [
					item.icon &&
						h(resolveComponent('CIcon'), {
						customClassName: 'nav-icon',
						name: item.icon,
						}),
					item.name,
					item.badge &&
						h(
						CBadge,
						{
							class: 'ms-auto',
							color: item.badge.color,
						},
						{
							default: () => item.badge.text,
						},
						),
					],
				},
			),
		},
	),
},

I have removed href and onClick props from the original code. And shifted them into RouterLink render function and href converted to "to" attribute for RouterLink. For css added the class nav-link.

That does the trick.
Hope it helps.

from coreui-free-vue-admin-template.

I checked AppSidebarNav.js and set custom prop to false in h function that creates RouterLink.
It solves 2 problems and creates 2 problems.

Solved problems:
1- createWebHistory is working well. I can use template's routes without that # sign.
2- router.beforeEach was triggered twice before I set 'custom' prop to false. Now it triggers only once. Noice.

Created problems:
1- custom prop's definition in node_modules>vue router>...RouterLink says:
Whether RouterLink should not wrap its content in an a tag. Useful when using v-slot to create a custom RouterLink
Therefore now all sidebar li tags are wrapped in a tag. It is not a valid html (ul>a>li) but also it seems doesn't affect anything badly (except styles, i removed underline of li's wrapper a with css)
2- breadcrumb and other components that has router-link are working like my first comment. i guess they all have this custom property :(

from coreui-free-vue-admin-template.

@zeeforum Yes it helped, thank you!

from coreui-free-vue-admin-template.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions

from coreui-free-vue-admin-template.

Links doesn't work properly with history: createWebHistory
The issue not resolved yet.

from coreui-free-vue-admin-template.