vue rooter 实现原理
Vue Router 的实现原理
Vue Router 是 Vue.js 的官方路由管理器，其核心原理基于前端路由的实现机制，主要包括路由映射、组件渲染和导航守卫等功能。
路由模式
Vue Router 支持两种路由模式：
-
Hash 模式：通过 URL 的 hash（
#）部分实现路由切换。Hash 变化不会触发页面刷新，但会触发hashchange事件。window.addEventListener('hashchange', () => { // 根据 hash 变化更新视图 }); -
History 模式：利用 HTML5 History API（
pushState、replaceState）实现无刷新路由切换。需要服务器配置支持以避免直接访问子路由时返回 404。window.addEventListener('popstate', () => { // 根据 path 变化更新视图 });
路由映射与组件渲染
Vue Router 通过路由配置将 URL 路径映射到对应的组件。当路由变化时，Vue Router 会动态渲染匹配的组件。
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
];响应式路由匹配
Vue Router 利用 Vue 的响应式系统，将当前路由路径（$route.path）与路由配置动态匹配。当路径变化时，自动触发组件重新渲染。
导航守卫
导航守卫是路由跳转过程中的钩子函数，用于控制导航行为（如权限验证、页面跳转拦截等）。分为全局守卫、路由独享守卫和组件内守卫。
router.beforeEach((to, from, next) => {
if (requiresAuth(to)) next('/login');
else next();
});动态路由
支持通过 addRoute 动态添加路由配置，适用于权限管理等场景。
router.addRoute({ path: '/admin', component: Admin });路由懒加载
通过动态导入（import()）实现路由组件的懒加载，优化首屏加载性能。
const User = () => import('./views/User.vue');Vue Router 的核心是通过监听 URL 变化，动态匹配路由配置并渲染组件，同时提供导航控制和扩展能力，实现单页应用的无刷新跳转。
