在不依赖第三方库的情况下，如何从零开始实现一个 Vue 路由系统？请描述其核心原理和关键实现步骤。
考察说明
考查候选人对 Vue 路由底层原理的理解，以及独立设计和实现一个路由系统的能力。
回答思路
- 【回答框架 1】Vue 路由系统本质上是一个响应式系统，核心是监听 URL 变化并动态渲染对应的组件。通常依赖 Vue 的响应式机制，将当前路径作为一个响应式数据，当路径变化时更新组件。
- 【回答框架 2】主要实现方式分为两种：hash 模式和 history 模式。hash 模式通过监听 hashchange 事件，将 window.location.hash 作为路由路径，不需要服务端支持；history 模式基于 HTML5 History API，通过 pushState、replaceState 修改 URL，并监听 popstate 事件，需要服务端配置支持。
- 【回答框架 3】路由系统的关键组件包括：路由表（Routes），定义路径与组件的映射；路由匹配器（Router），根据当前路径查找到对应的组件；视图容器（RouterView），作为动态组件的挂载点；路由链接（RouterLink），负责导航触发。
- 【回答框架 4】实现时，需要创建一个 Router 实例，内部维护当前路径的响应式引用。当路径变化时，通过路由表匹配出对应组件，并使用动态组件（component 动态绑定）渲染到 RouterView 中。还需要处理嵌套路由、路由参数、导航守卫等高级功能。
- 【关键点 1】路由系统的核心是 URL 变化驱动组件渲染，依赖 Vue 的响应式系统。
- 【关键点 2】hash 模式通过 hashchange 事件监听变化，history 模式通过 popstate 事件配合 History API。
- 【关键点 3】需要实现路由表匹配、动态渲染组件和导航能力。
- 【易错点 1】history 模式需要服务端配置 fallback，否则刷新页面会出现 404。
- 【易错点 2】嵌套路由需要递归匹配子路由，否则层级关系会丢失。
- 【易错点 3】导航守卫需要处理异步流程，避免竞态条件导致页面渲染错误。