Different between router-link and RouterLink in Vue-CodePudding

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.

CodePudding user response：

It's the same components, just with different cases, in vue it's recommended to use the PascalCase syntax as mentioned here :

In SFCs, it's recommended to use PascalCase tag names for child components to differentiate from native HTML elements. Although native HTML tag names are case-insensitive, Vue SFC is a compiled format so we are able to use case-sensitive tag names in it. We are also able to use /> to close a tag.

CodePudding user response：

They are the same thing. Any component can be used either by writing its name as PascalCase or kebab-case.

CodePudding user response：

One is the component name and one is the vue class. I don't think there is a difference. If you would create your own component e.g. MyComponent.vue, you can also use <MyComponent> or <my-component>