vue 路由实现原理
Vue 路由实现原理
Vue Router 是 Vue.js 官方的路由管理器，其核心原理基于前端路由的实现方式，主要包括哈希模式（Hash Mode）和历史模式（History Mode）。
哈希模式
哈希模式利用 URL 中的哈希部分（#）来实现路由切换，不会触发页面刷新。
当哈希值变化时，触发 hashchange 事件，Vue Router 监听该事件并匹配对应的路由组件。
window.addEventListener('hashchange', () => {
const currentHash = window.location.hash.slice(1);
// 根据哈希值匹配路由
});历史模式
历史模式基于 HTML5 的 history.pushState 和 history.replaceState API，允许直接修改 URL 路径而不刷新页面。
Vue Router 通过监听 popstate 事件实现路由切换。
window.addEventListener('popstate', (event) => {
const currentPath = window.location.pathname;
// 根据路径匹配路由
});路由匹配与组件渲染
Vue Router 维护一个路由映射表，将 URL 路径与组件关联。
当路由变化时，通过动态渲染 <router-view> 组件实现视图更新。
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
];导航守卫
导航守卫用于控制路由跳转的逻辑，包括全局守卫、路由独享守卫和组件内守卫。
通过钩子函数（如 beforeEach）实现权限校验或路由拦截。
router.beforeEach((to, from, next) => {
if (requiresAuth(to)) next('/login');
else next();
});动态路由
动态路由通过参数（如 :id）实现灵活匹配，路由组件可通过 this.$route.params 获取参数。
const routes = [
{ path: '/user/:id', component: User }
];懒加载
路由懒加载通过动态导入（import()）拆分代码，提升页面加载性能。
const User = () => import('./User.vue');实现流程总结
- 初始化路由配置，生成路由映射表。
- 监听 URL 变化（哈希或历史模式）。
- 根据当前 URL 匹配路由组件。
- 通过
<router-view>渲染组件。 - 触发导航守卫进行路由控制。
