Vue Router 是 Vue.js 官方的路由管理器,用于构建单页应用程序(SPA)的路由功能。Vue Router 支持以下几种路由模式:
1. 哈希模式(Hash Mode):使用 URL 中的 hash(#)来模拟路由,即将路由信息存储在 URL 的 hash 中。在 Vue Router 中,默认使用的就是哈希模式,例如 `http://example.com/#/home`。
2. 历史模式(History Mode):使用浏览器的 History API 来管理路由,可以在不重新加载页面的情况下修改 URL。历史模式通过使用 HTML5 的 History API 将路由信息存储在浏览器的历史记录中,从而实现前端路由。在历史模式下,URL 中不再有 hash,例如 `http://example.com/home`。
3. Abstract 模式:Abstract 模式是用于非浏览器环境的路由模式,例如在 Node.js 服务端渲染(SSR)中使用。
默认情况下,Vue Router 使用哈希模式,因为它在各种环境下都具备良好的兼容性,而且不需要服务器端的配置。如果希望使用历史模式,可以在创建 Vue Router 实例时通过配置 `mode: 'history'` 来启用。例如:
```javascript
const router = new VueRouter({
mode: 'history',
routes: [...]
})
```
使用哈希模式时,Vue Router 会自动在 URL 中添加 `#` 符号,并通过监听 `hashchange` 事件来实现路由的切换。而在历史模式下,需要服务器配置来支持 URL 的重写,以防止直接访问路由时出现 404 错误。
选择使用哪种路由模式,可以根据具体的项目需求和部署环境来决定。哈希模式在兼容性和部署上更加简单,但 URL 中带有 `#` 符号可能不太美观。历史模式则可以去除 `#` 符号,使 URL 更加友好,但需要服务器配置支持。