vue路由实现模式
Vue 路由实现模式
Vue Router 是 Vue.js 的官方路由管理器，支持两种路由模式：Hash 模式和History 模式。这两种模式分别适用于不同场景，具体实现方式如下：
Hash 模式
Hash 模式使用 URL 的 hash（#）部分来实现路由。其特点是不需要服务器额外配置，兼容性较好。
实现方式：
const router = new VueRouter({
mode: 'hash', // 默认模式，可省略
routes: [...]
})特点：
- URL 形如
http://example.com/#/path。 - 改变 hash 不会触发页面刷新或向服务器发送请求。
- 通过监听
hashchange事件实现路由切换。
History 模式
History 模式利用 HTML5 History API（pushState、replaceState）实现无 # 的 URL。需要服务器支持以避免 404 问题。
实现方式：
const router = new VueRouter({
mode: 'history',
routes: [...]
})服务器配置示例（以 Nginx 为例）：
location / {
try_files $uri $uri/ /index.html;
}特点：
- URL 形如
http://example.com/path，更简洁。 - 需要服务器配置将所有路由重定向到
index.html。 - 不支持 IE9 及以下版本。
选择建议
- Hash 模式：适合静态部署或无需服务端配置的场景（如 GitHub Pages）。
- History 模式：适合需要美观 URL 且能控制服务器配置的场景（如自有服务器）。
动态路由匹配
两种模式均支持动态路由，通过 : 定义参数：
routes: [
{ path: '/user/:id', component: User }
]通过 $route.params.id 获取参数。
导航守卫
路由模式无关，可用于权限控制或页面跳转逻辑：
router.beforeEach((to, from, next) => {
// 逻辑处理
next();
});注意事项
- History 模式需确保后端配置正确，否则刷新页面会返回 404。
- 静态文件部署时，Hash 模式更简单。
- 使用 History 模式时，需考虑 SEO 和社交分享兼容性。
