Vue中路由的实现（简单理解，详细的参考vue-router官网）：hash模式和history模式

素颜马尾好姑娘i 2023-10-11 12:23 2阅读 0赞

[Vue-Router官网][Vue-Router]

**hash模式：**

const router = new VueRouter({
      mode: 'hash',     // 配不配置都可以，默认是hash模式
      routes: [...]
    })

在浏览器中出现符号“\#”（例如：[http://localhost:8081/\#/][http_localhost_8081]）\#及\#后面的字符称之为hash，**用window.location.hash读取**；  
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。  
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 [http://www.xxx.com][http_www.xxx.com]，**因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。**

**history模式：**

const router = new VueRouter({
      mode: 'history',
      routes: [...]
    })

history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。  
history 模式下，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 [http://www.xxx.com/items/id][http_www.xxx.com_items_id]。**后端如果缺少对 /items/id 的路由处理，将返回 404 错误。**

“history模式要玩好，还需要后台配置支持……所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。”

hash 模式和 history 模式都属于浏览器自身的特性，Vue-Router 只是利用了这两个特性（通过调用浏览器提供的接口）来实现前端路由。一般场景下，hash 和 history 都是可以使用的。

[Vue-Router]: https://router.vuejs.org/guide/essentials/history-mode.html
[http_localhost_8081]: http://localhost:8081/#/GetAccount
[http_www.xxx.com]: http://www.xxx.com/
[http_www.xxx.com_items_id]: http://www.xxx.com/items/id