在说vue路由钩子函数之前,我先介绍一下路由的两种模式:

const router = new VueRouter({
   mode: 'history',
  mode: 'hash',
})


1.hash模式

    hash模式背后的原理是onhashchange事件,可以用window.onhashchange来监听这个事件,hash模式中的hash值是不会传到后台的,所以服务器端做一个根地址的映射就可以了。

2.history模式

     history利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈,在当前已有的 backforwardgo 的基础之上,它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL,但浏览器不会立即向后端发送请求。

3.总结

  1. hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 http://www.abc.com,因此对于后端来说,即使没有做到对路由的全覆盖,也不会返回 404 错误。
  2. history 模式下,前端的 URL 必须和实际向后端发起请求的 URL 一致,如 http://www.abc.com/book/id。如果后端缺少对 /book/id 的路由处理,将返回 404 错误。Vue-Router 官网里如此描述:“不过这种模式要玩好,还需要后台配置支持……所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。

    



Logo

前往低代码交流专区

更多推荐