vue rooter 实现原理

Vue Router 实现原理

Vue Router 是 Vue.js 官方提供的路由管理器，其核心原理基于前端路由技术，通过监听 URL 变化动态渲染组件。

路由模式

Vue Router 支持两种路由模式：

• Hash 模式：利用 URL 的 hash（#）部分实现路由切换，不会触发页面刷新。
  示例 URL：http://example.com/#/home
  原理：通过 window.location.hash 或 hashchange 事件监听变化。

• History 模式：基于 HTML5 History API（pushState/replaceState），URL 更简洁。
  示例 URL：http://example.com/home
  原理：通过 history.pushState() 修改 URL 并监听 popstate 事件。

  

核心实现步骤

1. 路由注册
   通过 routes 配置定义路径与组件的映射关系，生成路由表。

   const routes = [
     { path: '/home', component: Home },
     { path: '/about', component: About }
   ];

2. 路由实例化
   创建 Vue Router 实例时，会根据模式初始化路由监听机制。

   

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

3. 路由匹配
   当 URL 变化时，通过 path-to-regexp 等库匹配路由表，找到对应的组件。

4. 组件渲染
   将匹配的组件渲染到 <router-view> 占位符中，通过 Vue 的响应式机制更新视图。

5. 导航守卫
   提供全局或路由级的钩子函数（如 beforeEach），控制导航流程。

   router.beforeEach((to, from, next) => {
     // 权限校验等逻辑
     next();
   });

动态路由与懒加载

• 动态路由：通过 :id 形式定义参数，通过 $route.params 访问。

  { path: '/user/:id', component: User }

• 懒加载：使用动态导入提升性能。

  { path: '/about', component: () => import('./About.vue') }

响应式原理

Vue Router 通过将当前路由信息注入 Vue 实例的 $route 属性，利用 Vue 的响应式系统自动更新视图。当 URL 变化时，$route 会触发依赖收集的组件重新渲染。