Vue路由几种模式的区别

Vue路由几种模式的区别

Vue路由是由多个Url组成，使用不同的 Url 就可以导航到不同的位置，hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说hash 出现在 URL 中，但不会被包含在 http 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面；

vue-router有两种模式，

• Hash模式（默认）
• History（可配置）

Hash模式

Hash模式背后的原理是onhashchange事件，

在hash模式下，仅 hash 符号之前的内容会被包含在请求中，前端路由修改的是#后的信息，而浏览器请求时是不带#后面的内容，所以没有问题

History模式

history api可以分为两大部分：切换和修改 vue-router 可选择 history模式，在配置路由规则时，加入

mode: 'history',

这种模式需要后端支持，不然会报错

History模式的弊端:

在history模式下刷新是直接去请求服务器的。

会导致路径错误，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 http://www.xxx.com/items/id。后端如果缺少对 /items/id 的路由处理，将返回 404 错误。Vue-Router 官网里如此描述：“不过这种模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。