vue 3 路由器与 vue 2 相比，有了以下主要改进：原生懒加载，提升性能。可配置路由守卫，增强灵活性。元信息工厂，实现动态和可复用元信息。html5 history api，提供更干净的 url。优化路由解析器，提高性能和可扩展性。过渡组件，实现更灵活和可复用的过渡效果。基于 composeable 的导航 api，更加直观和可扩展。

Vue 2 和 Vue 3 路由的区别

开门见山

Vue 2 和 Vue 3 路由器在以下方面存在主要区别：

1. 路由懒加载

立即学习“前端免费学习笔记（深入）”；

• Vue 2: 只能手动懒加载路由组件。
• Vue 3: 引入了原生的懒加载功能，允许自动且按需加载路由组件，提升性能。

2. 路由守卫

• Vue 2: 路由守卫是基于 JavaScript 的函数，在路由切换前执行。
• Vue 3: 路由守卫被重新设计为可配置选项，提供更灵活的控制。

3. 路由元信息

• Vue 2: 路由元信息是一个附加到路由配置对象的简单对象。
• Vue 3: 路由元信息被扩展为一个元工厂，允许创建动态和可复用的元信息。

4. 路由历史记录

• Vue 2: 历史记录模式使用 hashchange 事件。
• Vue 3: 历史记录模式默认使用 HTML5 History API，提供更干净的 URL。

5. 路由解析器

• Vue 2: 使用 JavaScript 解析器将 URL 映射到路由。
• Vue 3: 引入了新的路由解析器，提供了更好的性能和可扩展性。

6. 路由过渡

• Vue 2: 过渡依赖于 CSS 类名。
• Vue 3: 引入了过渡组件，提供更灵活和可复用的过渡效果。

7. 导航 API

• Vue 2: 导航 API 是基于方法的，允许显式导航到路由。
• Vue 3: 导航 API 重新设计为基于 composeable 的，提供了更直观和可扩展的 API。

总结

Vue 3 路由器通过引入懒加载、路由守卫增强、路由元信息扩展、历史记录模式改进、路由解析器优化、过渡组件和经过重新设计的导航 API，提供了显著的增强和性能改进。