При использовании 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. Создание нового проекта Vue с помощью команды npm init vue@latest использует компоненты RouterLink и RouterView вместо router-link и router-view.





Это одно и то же. Любой компонент можно использовать, написав его имя как PascalCase или kebab-case.
Это те же компоненты, только в разных случаях, в vue рекомендуется использовать синтаксис PascalCase, как уже упоминалось здесь:
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.
Несмотря на рекомендацию, наиболее распространенным синтаксисом является kebab case для приложений Vue. Не разница функционально. @Юсаф
@Yousaf Я думаю, что они написаны в кебаб-кейсе, поскольку эти компоненты отличаются от нативных элементов.
Один — это имя компонента, а другой — класс vue. Я не думаю, что есть разница. Если вы создадите свой собственный компонент, например. MyComponent.vue, вы также можете использовать <MyComponent> или <my-component>
Если
PascalCaseявляется рекомендуемым соглашением об именах, есть ли конкретная причина, по которой vue-router используетkebab-caseв своих примерах?