vue路由模式实现原理
Vue 路由模式实现原理
Vue Router 提供了两种路由模式：hash 模式和 history 模式。它们的实现原理不同，但核心目标都是通过监听 URL 变化来匹配对应的组件并渲染。
Hash 模式
Hash 模式利用 URL 中的 hash（#）部分来实现路由。由于 hash 的变化不会触发页面刷新，因此可以通过监听 hashchange 事件来实现路由切换。
-
URL 示例：
http://example.com/#/home -
原理： 浏览器不会将 hash 部分发送到服务器，因此改变 hash 不会导致页面重新加载。 Vue Router 通过监听
hashchange事件来响应 URL 变化，并匹配对应的路由配置。 -
代码实现：
window.addEventListener('hashchange', () => { const currentPath = window.location.hash.slice(1) || '/'; // 根据 currentPath 匹配路由并渲染组件 });
History 模式
History 模式利用 HTML5 History API（pushState 和 replaceState）来实现路由。这种模式下的 URL 更简洁，没有 #，但需要服务器支持。
-
URL 示例：
http://example.com/home
-
原理： History API 允许开发者直接操作浏览器的历史记录栈，改变 URL 而不刷新页面。 Vue Router 通过监听
popstate事件来响应 URL 变化（例如用户点击后退按钮）。 -
代码实现：
window.addEventListener('popstate', () => { const currentPath = window.location.pathname; // 根据 currentPath 匹配路由并渲染组件 }); // 主动跳转路由 history.pushState({}, '', '/home');
核心差异
- 兼容性：Hash 模式兼容性更好，History 模式需要 HTML5 History API 支持。
- URL 美观性：History 模式的 URL 更简洁，没有
#。 - 服务器配置：History 模式需要服务器配置，确保所有路径返回同一个 HTML 文件（通常是
index.html），否则直接访问子路由会返回 404。
服务器配置示例（History 模式）
-
Nginx：
location / { try_files $uri $uri/ /index.html; } -
Apache：
RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L]
路由匹配与渲染
Vue Router 的核心是通过路由配置表（routes）匹配当前 URL，找到对应的组件并渲染到 <router-view> 中。无论是 Hash 模式还是 History 模式，最终都会将 URL 转换为路径，与路由配置进行匹配。
-
路由配置示例：
const routes = [ { path: '/home', component: Home }, { path: '/about', component: About }, ]; -
动态路由： 支持动态路径参数（如
/user/:id），通过this.$route.params访问参数。
导航守卫
Vue Router 提供了导航守卫（如 beforeEach、beforeResolve、afterEach），允许在路由切换前后执行逻辑（如权限验证、数据加载）。
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login');
} else {
next();
}
});总结
- Hash 模式通过
hashchange事件监听 URL 变化，兼容性好。 - History 模式通过 History API 实现，URL 更简洁，但需要服务器支持。
- 路由匹配基于配置表，支持动态参数和导航守卫。
