前端路由与后端路由

1.前端路由

是针对SPA应用来说的，前端路由是不涉及服务器的，是前端利用hash或者HTML5的history API来实现的，通过router库的api来进行的URL更新，一般用于不同内容的展示和切换

2.后端路由

是浏览器在地址栏中切换不同的url时，每次都向后台服务器发出请求，服务器响应请求，在后台拼接html文件传给前端显示, 返回不同的页面

3.vue中的Hash模式和History模式

Hash模式

hash模式利用的是浏览器不会对#号后面的路径对服务端发起路由请求。也即在浏览器里输入如下这两个地址：http://localhost/#/user/1和http://localhost/其实到服务端都是去请求http://localhost这个页面的内容。

而前端的router库通过捕捉#号后面的参数、地址，来告诉前端库（比如Vue）渲染对应的页面。这样，不管是我们在浏览器的地址栏输入，或者是页面里通过router的api进行的跳转，都是一样的跳转逻辑。所以这个模式是不需要后端配置其他逻辑的，只要给前端返回http://localhost对应的html，剩下具体是哪个页面，就由前端路由去判断便可。

History模式

不带#号的路由，也就是我们通常能见到的URL形式。该模式要实现这个功能一般都是通过HTML5提供的history这个api。它有pushState() 和 replaceState() 方法（需要特定浏览器支持），用来完成 URL 跳转而无须重新加载页面，不过这种模式还需要后台配置支持。由于这两个方法的作用就是可以将url替换并且不刷新页面，因此浏览器一旦刷新，就会去真正请求服务器资源，导致页面报错404，需要服务器端做点手脚，将不存在的路径请求重定向到入口文件（index.html）。调用 history.pushState() 相比于直接修改 hash，存在以下优势:

pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL
pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中
pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串
pushState() 可额外设置 title 属性供后续使用