【vue3|第19期】vue3一般组件与路由组件的探讨

日期：2024年8月2日
作者：Commas
签名：(ง •_•)ง 积跬步以致千里,积小流以成江海……
注释：如果您觉得有所帮助，帮忙点个赞，也可以关注我，我们一起成长；如果有不对的地方，还望各位大佬不吝赐教，谢谢^ - ^
1.01³⁶⁵ = 37.7834；0.99³⁶⁵ = 0.0255
1.02³⁶⁵ = 1377.4083；0.98³⁶⁵ = 0.0006

说在最前面：本文 vue3 的示例代码，在没有另外声名的情况下，均采用 <script setup> 组合式代码风格，风格统一，避免混乱，请各位新老食客放心食用哈 ^ _ ^

---

---

---

一、前言

---

在 Vue.js 中，组件分为一般组件和路由组件。一般组件是构成应用的基础，可以在不同的页面和功能中复用。而路由组件则与 Vue Router 紧密相关，主要用于定义和应用的路由结构，通过路由配置来控制组件的显示和隐藏。本文将探讨一般组件与路由组件的区别，并详细讲解路由组件的工作原理。

二、一般组件（General Components）

---

（1）定义

一般组件是 Vue 应用中最为常见的组件类型，它们不直接与路由相关联，而是作为页面或路由组件内部的功能单元被复用。一般组件可以在任何父组件的模板中被引用和使用，以实现更细粒度的功能划分和代码复用。如按钮、卡片、表单等。它们可以在多个地方被引用和使用，不直接与路由系统关联。

（2）用途

一般组件主要用于构建页面的一部分，提供可重用的界面元素。

（3）特点

• 可以在任何 Vue 组件的模板中通过 <component-name /> 的形式被引用，并通过 props 接收数据。
• 不被 Vue Router 管理，不直接参与路由跳转和匹配。
• 生命周期钩子与 Vue 组件的生命周期相同。

三、路由组件（Route Components）

---

（1）定义

路由组件是 Vue应用中与 Vue Router 直接关联的组件，它们定义了应用中的页面和视图。每个路由对应一个组件，用于构建应用程序的不同页面或视图。当用户通过路由导航到不同的 URL 时，Vue Router 会根据路由配置渲染相应的路由组件。

（2）用途

路由组件用于定义应用中的各个页面，它们根据用户的导航行为动态加载和显示。

（3）特点

• 直接与路由URL相关联，通过路由配置映射到具体的组件。
• 可以通过路由参数和查询参数接收数据。
• 由 Vue Router 负责实例化和销毁。在路由跳转时，旧路由组件会被卸载（如果设置了 keep-alive 则可能不会被卸载），新路由组件会被挂载。
• 可以通过 Vue Router 提供的路由守卫（如beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave）来增强路由导航的控制能力。
• 路由组件的生命周期与路由的导航过程紧密相关，例如，在路由进入前和离开后可以执行特定的逻辑。

四、一般组件和路由组件联系与区别

---

（1）联系

• 无论是一般组件还是路由组件，都遵循 Vue3 的组件开发规范，拥有相似的组件结构和生命周期。
• 一般组件能够在路由组件内部被引用和使用，共同构建出完整且丰富的页面功能。

（2）区别

• 路由组件直接与路由 URL 关联，而一般组件则不直接参与路由匹配和跳转。
• 路由组件在路由跳转时会经历卸载和挂载的过程，而一般组件的挂载和卸载通常由其父组件控制。
• 路由组件可以利用 Vue Router 提供的路由守卫等功能，而一般组件则不具备这些特性。

五、路由组件详解

---

当用户在应用中点击导航栏进行路由跳转时，以下过程会发生：

（1）路由匹配

Vue Router 会根据用户点击的导航链接找到对应的路由配置。

（2）组件切换（组件的动态加载）

• 原路由组件被卸载：如果当前路由有对应的组件实例，并且与新路由的组件不同，那么当前组件将经历 onBeforeUnmount() 和 onUnmounted() 生命周期钩子，最终被销毁。
• 新路由组件被挂载：1Vue Router1 将根据新的路由配置创建新组件的实例，并调用其onBeforeMount()和onMounted()生命周期钩子，将组件挂载到DOM上。

（3）缓存与激活

如果使用 Vue Router 的<keep-alive>功能，路由组件在切换时不会被销毁，而是被缓存起来。在下次访问时，组件可以被快速重新激活，从而提高应用性能。

（4）示例

// router.ts
import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];
const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;

在这个例子中，Home和About是路由组件，它们分别与/和/about路径关联。

当我们在页面上点击导航栏进行路由切换时，原有的路由组件通常会被卸载，而新的路由组件则会被挂载。

比如，当用户从 / 路由切换到 /about 路由时，/ 对应的路由组件（Home.vue）会依次经历组件的卸载生命周期钩子，如 onBeforeUnmount() 和 onUnmounted() ，从而释放相关的资源。与此同时，/about 对应的路由组件（About.vue）会经历挂载的生命周期钩子，像 onBeforeMount()和onMounted() ，进而完成组件的初始化以及渲染工作。

这样的机制设计能够显著提高应用的性能表现，避免不必要的资源占用，仅仅在需要的时候加载和展示相关的组件内容。

六、结语

---

总结来说，理解一般组件与路由组件的区别，以及掌握路由组件的工作原理，对于构建高效的单页面应用至关重要。而路由组件 Vue Router 的设计原理就是通过更改地址栏 URL 来动态地切换不同的模板内容，从而实现单页应用（SPA）的无刷新路由跳转。希望这篇文章能够帮助您更好地理解这些概念。

---

参考文章：

• 《Vue Router》

---

版权声明：本文为博主原创文章，如需转载，请给出：
原文链接：https://blog.csdn.net/qq_35844043/article/details/140870449