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>。

PS搭建一个新的 Vue 项目，使用npm init vue@latest命令使用RouterLink和RouterView组件而不是router-link和router-view。

Answer 1

它是相同的组件，只是情况不同，在 vue 中建议使用此处PascalCase提到的语法：

在 SFC 中，建议对子组件使用 PascalCase 标记名称，以区别于本机 HTML 元素。虽然原生 HTML 标签名称不区分大小写，但 Vue SFC 是一种编译格式，因此我们可以在其中使用区分大小写的标签名称。我们还可以使用 /> 来关闭标签。