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. 路由元信息
NopCommerce (ASP.NET商城)
下载
nopCommerce 是一个由ASP.NET多层模式开发的开源电子商城系统，可以自行设置模板、配置灵活、功能强大，它内含一个目录前端和一个管理工具后端。前端包括用户注册、商品购买(可以进行评论)、投票、Blog等，后端有类别管理、产品管理、客户及角色管理、订单管理、纳税管理、国家（地区管理）、邮件发送、消息模板、新闻发布、blog管理,可以对列表数据进行XML导出。
- 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，提供了显著的增强和性能改进。
