从 Vue2 到 Vue3 ，你必须要掌握的路由差异和使用场景！
最新回答
静若幽兰
2024-11-25 08:03:23
路由模式的变化在 Vue3 中尤为显著，模式配置被简化为 history，并通过 createWebHistory 接收基础路径作为参数，替代了之前的 Router 构造函数。
路由跳转的方式与 Vue2 保持一致，无论是通过组件跳转还是编程式导航，都依赖于 router.push 和 RouterLink 组件。值得注意的是，params 和 path 参数不能同时使用。
全局前置守卫提供了权限控制功能，通过 router.beforeEach 方法实现，确保路由请求符合预设条件。每个守卫方法接受当前路由、之前路由和 next 函数作为参数，返回值可以阻止或允许导航。
全局解析守卫（router.beforeResolve）在所有组件内守卫和异步组件解析后触发，确保页面加载时数据准备就绪。例如，可以在此处实现自定义 meta 的访问。
全局后置钩子（router.afterEach）用于执行辅助功能，如页面分析、更改标题或声明页面状态，但不提供 next 函数以控制导航流程。
路由独享守卫（beforeEnter）在特定路由被访问时触发，仅在路由改变时执行，避免在参数、查询或 hash 改变时重复执行。通过 beforeEnter 守卫，可以实现组件间的共享逻辑，或者通过 meta 属性与全局守卫结合使用。
组件内的守卫提供了更细粒度的控制，如 beforeRouteEnter、beforeRouteUpdate 和 beforeRouteLeave。beforeRouteEnter 守卫在组件实例创建之前触发，而 beforeRouteUpdate 和 beforeRouteLeave 分别在路由更新和离开时执行，提供了对组件生命周期的深入控制。
路由组件传参的传统方法已过时，推荐使用 props 属性配置，将 route.params 直接绑定到组件的 props 对象上，实现组件与路由参数的解耦。配置 props 为 true 或对象形式，可以实现不同类型的参数处理，如布尔值、对象或自定义函数转换。
滚动行为的自定义允许开发者在路由切换时控制页面滚动位置，通过提供 scrollBehavior 函数实现各种滚动策略，包括滚动到固定距离、元素位置、锚点位置或恢复之前滚动位置等。
过渡效果的实现通过 v-slot 结合 Animete.css 提供了丰富的过渡动画，单个路由或复用组件的过渡效果可通过 key 属性和动态类名实现。
动态路由的添加与管理通过 router.addRoute 方法实现，支持逐个添加和通过名称替换路由，而删除路由则可通过 router.removeRoute、路由重命名或回调函数完成。
嵌套路由的添加允许在现有路由结构中嵌入子路由，通过 name 参数传递实现与 children 属性类似的效果。
本文覆盖了 Vue-Router4 的核心功能和应用场景，旨在帮助开发者更高效地利用 Vue3 的路由系统。通过深入了解和实践这些功能，开发者可以构建更加灵活、响应迅速的单页面应用。
热门标签
