router使用场景：组件 API 风格

单文件组件​

Vue Router 经常在配合打包工具 (如 Vite) 和单文件组件 (即 .vue 文件) 的应用中使用。本教程大多数的示例都是如此，但是 Vue Router 本身并不要求你使用构建工具或单文件组件。

例如，若你要使用 Vue 和 Vue Router 的使用全局构建版本，这些库将被暴露为全局对象，而不是导入：

const { createApp } = Vue
const { createRouter, createWebHistory } = VueRouter

组件 API 风格​

Vue Router 可以使用组合式 API 或选项式 API 。在必要时，示例将会同时使用两种风格，组合式 API 示例通常会使用 <script setup>，而不是显式的 setup 函数。

如果你对于这两种风格不熟悉，可以参考 Vue - API 风格。

router 和 route​

在本教程中，我们常常以 router 作为路由器实例提及。即由 createRouter() 返回的对象。在应用中，访问该对象的方式取决于上下文。例如，在组合式 API 中，它可以通过调用 useRouter() 来访问。在选项式 API 中，它可以通过 this.$router 来访问。

类似地，当前路由会以 route 被提及。基于不同 API 风格的组件，它可以通过 useRoute() 或 this.$route 来访问。

RouterView 和 RouterLink​

组件 RouterView 和 RouterLink 都是全局注册的，因此它们不需要在组件模板中导入。但你也可以通过局部导入它们，例如 import { RouterLink } from 'vue-router'。

在模板中，组件的名字可以是 PascalCase 风格或 kebab-case 风格的。Vue 的模板编译器支持两种格式，因此 <RouterView> 和 <router-view> 通常是等效的。此时应该遵循你自己项目中使用的约定。

如果使用 DOM 内模板，那么需要注意：组件名字必须使用 kebab-case 风格且不支持自闭合标签。因此你不能直接写 <RouterView />，而需要使用 <router-view></router-view>。