本文主要是介绍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>。
这篇关于router使用场景：组件 API 风格的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
