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。

- Yousaf

Answer 1

在Vue中，相同的组件只是用不同的大小写表示。建议使用PascalCase语法，如此处所述：here：

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

- Boussadjra Brahim

---

如果PascalCase是推荐的命名约定，那么为什么vue-router在其示例中使用kebab-case？ - Yousaf

尽管有建议，但Vue应用程序中最常见的语法是烤肉串式命名法。在功能上没有区别。@Yousaf - kissu

@Yousaf 我认为它们使用烤肉串命名法是因为这些组件与原生元素不同。 - Boussadjra Brahim

Answer 2

它们是同一件事。任何组件都可以使用PascalCase或kebab-case编写其名称。

- David Domkář

Answer 3

一个是组件名称，一个是Vue类。我认为它们之间没有区别。如果您创建自己的组件，例如MyComponent.vue，您也可以使用<MyComponent>或<my-component>。

- Pieter Zeilstra