vue router的原理

两种路由模式

Vue Router 提供了两种主要的路由模式：hash 模式和 history 模式。

1. Hash 模式

在 hash 模式下，URL 使用 # 符号后跟路由信息。这个 # 后面的内容不会被发送到服务器，因此适合前端路由的实现。Vue Router 利用 window.onhashchange 事件来检测 URL 中 # 后面的变化，从而切换视图。

• URL 示例：http://example.com/#/home
• 工作原理：利用 hash 监听（onhashchange），当 # 后面的部分发生变化时，Vue Router 捕捉到变化并根据路由规则加载对应的组件。

优点：

• 兼容性强，支持所有浏览器。

缺点：

• URL 中会带有 # 符号，不够美观。

2. History 模式

history 模式使用 HTML5 的 pushState 和 replaceState API 来管理浏览器历史记录。在这个模式下，URL 是干净的，不会有 # 符号。

• URL 示例：http://example.com/home
• 工作原理：利用浏览器的 history.pushState 和 history.replaceState 方法，当用户导航时修改浏览器的地址栏而不重新加载页面。Vue Router 捕获地址栏的变化并加载相应组件。

优点：

• URL 干净美观，没有 # 符号。

缺点：

• 需要服务器支持，因为刷新页面时，浏览器会直接向服务器发起请求。如果服务器没有配置路由回退机制，可能会导致 404 错误。

Vue Router 的具体实现流程

1. 初始化：

   • 在初始化时，Vue Router 会根据配置文件创建路由表（所有路由路径和对应组件的映射）。
   • Vue Router 根据选定的路由模式（hash 或 history）来绑定浏览器的 hashchange 或 popstate 事件，以监测 URL 变化。

2. 导航守卫：

   • Vue Router 提供了三个导航守卫：全局守卫、路由独享守卫、组件内守卫。

   • 在 URL 变化时，Vue Router 会先执行这些守卫函数，决定是否允许导航。

     • beforeEach: 在全局导航前触发。
     • beforeEnter: 在进入某个特定路由前触发。
     • beforeRouteEnter: 在进入组件之前触发。

3. 路由匹配：

   • 当 URL 变化时，Vue Router 会从路由表中查找对应的路径。它使用路径解析算法来匹配最合适的路由规则。

4. 视图更新：

   • 找到匹配的路由后，Vue Router 会将与该路由关联的组件加载到 router-view 组件中。
   • router-view 是一个占位符组件，表示路由匹配到的组件将渲染在这个位置。

5. 路由更新后的钩子：

   • 路由切换完成后，Vue Router 会调用 afterEach 钩子，允许执行一些收尾操作（如更改页面标题、发送统计数据等）。

工作流程示例

假设我们有以下路由配置：

javascript
复制代码
const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

const router = new VueRouter({
  mode: 'history', // 或者 'hash'
  routes
});

1. 当用户访问 /about 时，Vue Router 会捕捉 URL 的变化。
2. Vue Router 会匹配 /about 路由，并找到对应的 About 组件。
3. Vue Router 然后将 About 组件加载到 router-view 中。
4. 如果有导航守卫，如 beforeEach，会在路由更新之前触发，并检查是否允许导航。
5. 最终，视图更新，用户看到 About 页面内容。

总结

Vue Router 的工作原理主要基于浏览器的 URL 变化检测和视图更新机制，核心是通过 hash 或 history 模式来实现 URL 和视图的同步。通过路由表、导航守卫、router-view 占位符，Vue Router 实现了单页面应用程序的路由管理，保证了页面在不刷新的情况下能够动态切换