vue router实现原理
Vue Router 的实现原理
Vue Router 是 Vue.js 官方提供的路由管理器，其核心原理基于前端路由的实现方式，主要包括路由匹配、组件渲染和导航守卫等功能。
路由模式
Vue Router 支持两种路由模式：hash 模式和 history 模式。
Hash 模式
通过监听 window.onhashchange 事件实现路由切换。URL 中的 # 符号及后面的部分不会发送到服务器，仅由前端处理。
示例 URL：http://example.com/#/home
History 模式
基于 HTML5 History API（pushState 和 replaceState），允许修改 URL 而不刷新页面。需要服务器配置支持，避免直接访问子路由时返回 404。
示例 URL：http://example.com/home
路由匹配
Vue Router 通过路由配置表（routes 数组）匹配当前 URL 路径，找到对应的组件。匹配过程基于路径解析和动态参数（如 :id）。
const routes = [
{ path: '/home', component: Home },
{ path: '/user/:id', component: User }
];组件渲染
匹配到路由后，Vue Router 通过 <router-view> 动态渲染对应的组件。<router-view> 是一个函数式组件，根据当前路由的 matched 数组决定渲染层级。
导航守卫
导航守卫用于控制路由跳转的权限和逻辑，包括全局守卫、路由独享守卫和组件内守卫。
- 全局守卫：如
router.beforeEach，在每次导航前执行。 - 路由独享守卫：在路由配置中定义
beforeEnter。 - 组件内守卫：如
beforeRouteEnter、beforeRouteUpdate。
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});响应式原理
Vue Router 通过 Vue 的响应式系统跟踪当前路由状态。路由对象（如 $route）是响应式的，路由变化时会触发组件更新。
核心实现代码片段
以下是简化版的路由器核心逻辑：
class VueRouter {
constructor(options) {
this.routes = options.routes;
this.mode = options.mode || 'hash';
this.current = { path: '/' };
if (this.mode === 'hash') {
window.addEventListener('hashchange', this.handleHashChange.bind(this));
} else {
window.addEventListener('popstate', this.handlePopState.bind(this));
}
}
handleHashChange() {
this.current.path = window.location.hash.slice(1) || '/';
}
handlePopState() {
this.current.path = window.location.pathname;
}
push(path) {
if (this.mode === 'hash') {
window.location.hash = path;
} else {
window.history.pushState({}, '', path);
}
}
}动态路由
动态路由通过 addRoute 方法实现，允许运行时添加路由配置。
示例：
router.addRoute({ path: '/new', component: NewComponent });懒加载
路由懒加载通过动态导入（import()）实现，减少初始加载体积。
示例：
const User = () => import('./views/User.vue');通过以上机制，Vue Router 实现了高效的路由管理和组件渲染，支持复杂的单页应用（SPA）开发需求。
