前端路由的核心就是改变URL，但是页面不进行整体刷新
这里我们有一下两种方案：
1、URL的hash
-
URL的hash也就是锚点（#），其本质是改变window.location的href属性。 - 我们可以通过直接赋值
location.hash来改变href，但是页面不发生刷新。
比如我们现在有这样的一个URL：http://www.aaa.com/#/bbb，hash 的值为 #/bbb。它的特点在于：hash 虽然出现在 URL 中，但它并不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
由于hash值变化不会导致浏览器向服务器发出请求，而且hash改变会触发
hashchange事件，浏览器的进后退也能对其进行控制，这么一来，即使前端并没有发起http请求也能够找到对应页面的代码块进行按需加载。所以人们在 html5 的 history 出现前，基本都是使用 hash 来实现前端路由的。
2、HTML5的history模式
history 接口是HTML5新增的，window.history 属性指向 history 对象，它表示当前窗口的浏览历史。浏览器工具栏的“前进”和“后退”按钮，其实就是对 history 对象进行操作。
history 对象保存了当前窗口访问过的所有页面网址。history 对象主要有两个属性。
history.length：当前窗口访问过的网址数量（包括当前网页）history.state：history堆栈最上层的状态值。
由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航。history有五个方法改变URL而不刷新页面。
1、history.pushState(state,title,url)
向浏览器新增一条历史记录，但是不会刷新当前页面（不会重载），我们点击浏览器的后退按钮是可以归到之前的页面的。
state：一个与添加的记录相关联的状态对象，主要用于popstate事件。title：新页面的标题。但是，现在所有浏览器都忽视这个参数，所以这里可以填空字符串。url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
2、history.replaceState(state,title,url)
更改当前浏览器的历史记录，即把当前执行此代码页面的记录给替换掉，那么我们点击浏览器的后退按钮就不能回到之前的页面了
3、history.back()、history.forward()、history.go()
-
history.back()：移动到上一个网址，等同于点击浏览器的后退键。对于第一个访问的网址，该方法无效果。
history.forward()：移动到下一个网址，等同于点击浏览器的前进键。对于最后一个访问的网址，该方法无效果。history.go()：接受一个整数作为参数，以当前网址为基准，移动到参数指定的网址，比如go(1)相当于forward()，go(-1)相当于back()。如果参数超过实际存在的网址范围，该方法无效果；如果不指定参数，默认参数为0，相当于刷新当前页面。
注意:移动到以前访问过的页面时，页面通常是从浏览器缓存之中加载，而不是重新要求服务器发送新的网页。
history模式下在刷新页面时，如果服务器中没有相应的响应或资源，就会出现404。因此，如果URL匹配不到任何静态资源，则应该返回同一个index.html页面，这个页面就是你app依赖的页面。
原文链接：https://blog.csdn.net/weixin_43974265/article/details/112762367
网友评论