vue.js - 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

它是相同的组件，只是大小写不同，在 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.