Vue 中 router-link 和 RouterLink 的区别

Question

在使用 Vue Router 时，我发现我可以使用 <router-link> 和 RouterLink 来获得相同的结果，即在不同的路由之间导航。

同样，还有 <router-view> 和 RouterView 组件。

以下两个代码示例给出了相同的结果：

与 <router-link> 和 <router-view>:

<template>
  <router-link to="/">Home</router-link>
  <router-link to="/about">About</router-link>
  <hr />
  <router-view></router-view>
</template>

与 <RouterLink> 和 <RouterView>:

<script setup>
import { RouterLink, RouterView } from "vue-router";
</script>

<template>
  <RouterLink to="/">Home</RouterLink>
  <RouterLink to="/about">About</RouterLink>
  <hr />
  <RouterView />
</template>

问题

<router-link> 和 RouterLink（以及 <router-view> 和 RouterView 之间有什么区别？）

我在 Vue Router 文档上找不到任何内容。搜索 RouterView 或 RouterLink 不会显示与它们相关的任何结果。文档只提到 <router-link> 和 <router-view>.

P.S. 使用 npm init vue@latest 命令脚手架一个新的 Vue 项目使用 RouterLink 和 RouterView 组件而不是 router-link 和 router-view.

Answer 1

它们是同一回事。任何组件都可以通过将其名称写为 PascalCase 或 kebab-case.

来使用

Answer 2

都是相同的组件，只是大小写不同，在vue中建议使用PascalCase语法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.

Answer 3

一个是组件名，一个是vueclass。我认为没有区别。如果您要创建自己的组件，例如MyComponent.vue，你也可以使用或

Vue 中 router-link 和 RouterLink 的区别

Different between router-link and RouterLink in Vue

vue.js

vuejs3

vue-composition-api