Hash 模式: 在 hash 模式下,URL 中的路由信息会以 #
符号后的内容表示,例如 http://example.com/#/home
。当 URL 中的 hash 发生变化时,浏览器不会向服务器发送请求,而是通过监听 hashchange
事件来响应 URL 的变化,并根据新的 hash 值进行路由的切换。
Vue Router 默认使用 hash 模式。它通过在页面中插入一个隐藏的 iframe,使用 onhashchange
事件监听 URL 的变化。当路由切换时,Vue Router 会根据新的 hash 值匹配对应的路由组件,并将组件渲染到页面中。
优点:hash 模式在所有浏览器中都能良好地工作,不需要额外的服务器配置。
缺点:URL 中的 #
符号可能会被视为页面内的锚点,对搜索引擎的友好度较低。
History 模式: 在 history 模式下,URL 中的路由信息不再使用 #
符号,而是直接使用正常的 URL 地址,例如 http://example.com/home
。当 URL 发生变化时,浏览器会向服务器发送请求,服务器需要配置来确保对任何 URL 请求都返回相同的 HTML 页面,然后由前端路由来处理 URL 的变化。
在使用 history 模式时,需要在服务器配置中添加一个规则,将所有的 URL 请求重定向到前端的入口页面,例如 index.html
。这样,在刷新页面或直接访问某个路由时,服务器会返回入口页面,并由前端路由来处理路由的切换。
在 Vue Router 中启用 history 模式,需要通过服务器配置来确保所有的 URL 请求都返回入口页面。这可以在 Vue CLI 的配置文件中进行设置,或者通过在服务器上添加相应的规则来实现。
优点:URL 更加友好,没有 #
符号,更符合正常的 URL 地址格式。
缺点:需要额外的服务器配置来确保所有的 URL 请求都返回入口页面,否则会出现 404 错误。