2025年vue3.0路由守卫（vue3 路由守卫）

Vue.js 3的组件与路由是Web应用开发的核心，组件驱动页面DOM的动态挂载和渲染，路由控制页面组件的销毁和创建，实现页面切换的效果。本指南旨在引导您掌握组件化开发和路由控制，实现页面间的动态切换与导航控制。通过案例学习与案例实践，熟练掌握Vue.js 3组件与路由的应用。

组件是将用户界面（UI）拆分并封装成独立、可复用、带有各自的逻辑的模块。每个组件都是一个独立的 Vue.js 3 实例，具有独立的模板、数据、方法和生命周期钩子，因此组件可以定义和管理自身的功能和样式。以下是组件的关键特性：

① 模块化设计

组件开发是将HTML、CSS和JavaScript代码封装成组件内部的状态管理和逻辑处理，成为相互隔离的独立模块。

② 可复用性

组件被注册或引用后，即可在应用的多个场景中重复利用。通过参数化配置，同一个组件可以展现出不同的形态和行为。

③ 嵌套结构

Vue.js 3支持组件的嵌套使用，构建出层次分明的组件树，这种结构使得用户界面可以被拆分成多个小型的、易于管理的后代组件。

④ 生命周期钩子函数

生命周期钩子（Lifecycle Hooks）覆盖组件的整个生命周期，从组件实例化前（beforeCreate），组件创建并初始化结束（created），组件模板被编译并挂载到DOM前（beforeMount）和挂载到DOM后（mounted），响应式数据更新周期（beforeUpdate、updated），直至组件被销毁前（beforeUnmount）和销毁后（unmounted）。

⑤ 事件通信机制

Vue.js 3组件支持自定义事件的发送与监听，实现组件间的有效通信。

🚩 Vue.js 3的组件系统允许开发者使用独立可复用的组件来构建复杂的页面。编写组件时应注意以下组件定义规范。

① 单一职责原则：一个组件只负责一件事情，保证组件的简洁性和可维护性。

② 清晰的层次结构：对于较大的组件，可以拆分为更小的子组件，以提高复用性和可读性。

③ 使用props进行数据传递：父组件可以通过props向子组件传递数据。

④ 使用事件回调进行通信：子组件可以通过触发事件“emit”来与父组件进行通信。

Vue.js 3组件的主要结构由三部分组成，即模板（Template）、逻辑（Script）、样式（Styles）。模板用来编辑组件的HTML结构；逻辑是负责组件的JavaScript逻辑和数据等；样式是组件的CSS样式。构建个人信息展示组件示例来说明组件基本结构，示例代码如下。

在Vue.js 3中组件注册是为了确保程序构建和渲染DOM时能够正确识别并应用组件。注册组件时应遵循 W3C 规范中的PascalCase(首字母大写)自定义组件名例如“GlobalComponent”，确保组件名具有描述性并且能够反映组件的功能或内容。组件注册主要分为两种模式：全局注册和局部注册。

（1）全局注册

全局注册可以确保在任何模板中都可以使用这个全局组件，在Vue.js 3 中，全局注册一个组件通过“component()”方法实现。通过“registerComponents”示例展示Vue.js 3 的全局注册方法，具体步骤如下。

① 创建一个项目名称为“registerComponents”的项目（详情见编程指南1：认识Vue.js 3）。

② 打开“registerComponents”项目，在“srccomponents”目录下创建“GlobalComponent”文件夹并在“GlobalComponent”文件夹下创建“GlobalComponentA.vue”文件，“GlobalComponentA”组件内容如下。

③ 修改“srcmain.js”文件，通过 Vue.js 3 应用实例中的“ component()” 方法实现组件全局注册,文件内容如下。

④ 修改“srcApp.vue”文件，在文件中使用已全局注册的“GlobalComponentA”组件，文件内容如下。

💡 注意：

1.采用全局注册的组件方式，若此类组件在应用的最终版本中并未实际被引用或使用，生产环境的打包过程不会自动优化移除，将导致最终打包文件的体积增加。

2.全局注册会导致组件之间的依赖关系不够清晰，不利于项目的维护。

（2）局部注册

局部注册组件需要在使用它的父组件中引入或显式导入，注册后仅在当前组件可用，通过“registerComponents”项目展示局部注册，示例代码如下。

① 打开“registerComponents”项目，在“srccomponents”下创建“PartComponent”文件夹并在“PartComponent”文件夹下创建“PartComponentA.vue”文件,“PartComponentA”组件内容如下。

② 在“srcApp.vue”文件中设置“<script setup>”,引入“PartComponentA”组件，文件内容如下。

💡 注意：

局部注册的组件在后代组件中不可用。在这个例子中，“PartComponentA” 注册后仅在当前组件可用，而在任何的子组件或更深层的子组件中都不可用。

③ 在“srcApp.vue”文件中使用“components”选项显式注册自定义组件。

🚩 更多局部注册组件的使用方法请参考：https://cn.vuejs.org/guide/components/registration.html。

创作说明

名称：编程指南-Vue.js 3前端开发从学到用完美实践

版本：2024年

网站：http://www.51xueweb.cn

撰写团队：杜宇飞侯志强尤飞祥段玉昆

指导审核：阮晓龙

2025年vue3.0路由守卫（vue3 路由守卫）

相关推荐