Setting up navigation links with RouterLink
As we know, RouterView
oversees rendering the correct active view content relative to the URL path; RouterLink
, on the other hand, oversees mapping the routes to navigable links. RouterLink
is a Vue component that helps users navigate within an app with routing enabled. RouterLink
by default renders an anchor tag, <a>
, with a valid href
link generated by its to
prop.
In our example app generated by Vite, since there are two routes pre-populated, there are also two RouterLink
instances added to the <template>
section of App.vue
as the header navigation menu:
<nav> <RouterLink to="/">Home</RouterLink> <RouterLink to="/about">About</RouterLink> </nav>
Since we are using the web history mode with createWebHistory()
, the to
prop of each RouterLink
should receive an identical value with the path
property declared in the targeted route object (as...