VUE路由的原理

Vue的路由原理是基于浏览器的 History API 或者 Hashchange 事件来实现的。

1. 基于浏览器的 History API：

Vue使用浏览器的 History API（pushState、replaceState 和 popstate）来实现路由。在这种模式下，URL 中的路径部分会被修改成对应的路由路径，但不会刷新页面。

Vue通过创建一个Router实例来管理路由。

在Router实例中，定义一组路由规则，每个规则包含一个路径和对应的组件。

当用户在应用中触发路由跳转时，Router实例会捕获到对应的路径，并根据路由规则找到对应的组件。

Router实例会将找到的组件渲染到指定的位置，从而实现页面的切换。

1. 基于 Hashchange 事件：

如果浏览器不支持 History API，Vue会自动退化为使用 Hashchange 事件来实现路由。在这种模式下，URL 中的路径部分会被修改成对应的路由路径，并且以 # 开头的哈希部分会被解析为路由路径，不会导致页面刷新。

Vue通过创建一个Router实例来管理路由，与基于浏览器的 History API 类似。

在Router实例中，定义一组路由规则，每个规则包含一个路径和对应的组件。

当用户在应用中触发路由跳转时，Router实例会捕获到对应的哈希路径，并根据路由规则找到对应的组件。

Router实例会将找到的组件渲染到指定的位置，从而实现页面的切换。

无论是基于浏览器的 History API 还是 Hashchange 事件，Vue的路由实现都是通过监听浏览器的 URL 变化并匹配对应的路由规则，然后渲染对应的组件来实现页面的切换。同时，Vue还提供了一些辅助方法和组件（如<router-link>和<router-view>）来简化路由的使用。