Links doesn't work properly with history: createWebHistory

[sametsafak]

When I switch router mode from hash to web history and try to access any page from sidebar or breadcrumb, app downloads all of the files again and again like opened from scratch. It works like old non single page applications.

But when I put a router link myself like:
<router-link to="/dashboard">hello</router-link>
It works normally. Loads only page related files.

• Mac OS Monterey
• Chrome 97.0.4692.99 Arm

[sametsafak]

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 :(

[zeeforum]

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.

[sametsafak]

@zeeforum Yes it helped, thank you!

[github-actions]

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

[rofequl]

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