When using Vue Router, I found that I could use <router-link> as well as RouterLink to achieve the same result, i.e. navigate between different routes.
Similarly, there's <router-view> as well as RouterView component.
Following two code examples give me the same result:
With <router-link> and <router-view>:
<template>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<hr />
<router-view></router-view>
</template>
With <RouterLink> and <RouterView>:
<script setup>
import { RouterLink, RouterView } from "vue-router";
</script>
<template>
<RouterLink to="/">Home</RouterLink>
<RouterLink to="/about">About</RouterLink>
<hr />
<RouterView />
</template>
Question
What is the difference between <router-link> and RouterLink (and between <router-view> and RouterView?)
I couldn't find anything on Vue Router docs. Searching for RouterView or RouterLink doesn't show any results related to them. Docs only mention <router-link> and <router-view>.
P.S. Scaffolding a new Vue project with npm init vue@latest command uses RouterLink and RouterView components instead of router-link and router-view.