小言_互联网的博客

Vue中路由的实现(简单理解,详细的参考vue-router官网):hash模式和history模式

290人阅读  评论(0)

Vue-Router官网

hash模式:

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

在浏览器中出现符号“#”(例如:http://localhost:8081/#/)#及#后面的字符称之为hash,用window.location.hash读取
特点:hash虽然在URL中,但不被包括在HTTP请求中;用来指导浏览器动作,对服务端安全无用,hash不会重加载页面。
hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 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后端如果缺少对 /items/id 的路由处理,将返回 404 错误。

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

 

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


转载:https://blog.csdn.net/Miss_liangrm/article/details/101206881
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场