vue 路由实现机制
Vue 路由实现机制
Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。其核心实现机制主要包括以下几个方面：
路由模式
Vue Router 支持两种路由模式：
-
Hash 模式：通过 URL 的 hash（
#）部分实现路由切换。例如http://example.com/#/home。
实现原理是利用window.location.hash和hashchange事件监听 URL 变化。 -
History 模式：基于 HTML5 History API（
pushState、replaceState）实现无#的 URL。例如http://example.com/home。
需要服务器配置支持，避免直接访问子路由时返回 404。
路由注册与匹配
路由通过 routes 配置定义，Vue Router 会将其转换为路由映射表：
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]内部通过 path-to-regexp 库将路径转换为正则表达式，实现动态路由匹配（如 /user/:id）。
路由切换流程
- 导航触发：通过
router-link或编程式导航（router.push）触发路由切换。 - 路由匹配：根据当前 URL 匹配路由配置，解析参数、查询字符串等。
- 守卫钩子执行：依次执行全局守卫、路由独享守卫和组件内守卫（如
beforeEach）。 - 组件渲染：匹配的路由组件通过
<router-view>动态渲染，旧组件销毁。
响应式更新
Vue Router 利用 Vue 的响应式系统，将当前路由信息（如 $route）注入到组件实例中。当路由变化时，依赖 $route 的组件会自动更新。
核心实现代码片段
// 简化版路由监听逻辑（Hash 模式）
window.addEventListener('hashchange', () => {
const currentPath = window.location.hash.slice(1) || '/'
// 匹配路由并渲染组件
})动态路由
支持通过 router.addRoute() 动态添加路由，适用于权限控制等场景。内部通过维护树状结构的路由表实现高效匹配。
懒加载
路由组件可通过动态导入实现懒加载，优化首屏性能：
const Home = () => import('./Home.vue')
