8
前端路由可以和后端路由一起组合使用吗？
source link: https://www.v2ex.com/t/791960
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
前端路由挺有意思的一个东西，url 的路由直接在浏览器完成拦截跳转，都绕过后端服务器了。
所以对前端路由这个机制还是不大理解，比如在浏览器地址栏直接输入一个 url 地址，也会被前端拦截掉吗？
那后端比如 nginx 设置的路由规则还有效吗？
所以对前端路由这个机制还是不大理解，比如在浏览器地址栏直接输入一个 url 地址，也会被前端拦截掉吗？
那后端比如 nginx 设置的路由规则还有效吗？
第 1 条附言 · 3 小时 25 分钟前
实际项目中一般是怎么用的？
13 条回复 • 2021-07-27 12:32:20 +08:00
lybcyd 3 小时 44 分钟前
这个要看你的部署机制。如果是分开部署，想让前端路由生效，nginx 本来就要进行设置，肯定不会走后端。如果是先后端解析再把页面当作模板返回，那就是后端路由为主了，这种情况下需要后端的 controller 设置一下通配符，把未定义路由统一交给前端解析。
cczeng 3 小时 10 分钟前 
1
@James369 默认就是请求后端路由，然后后端没有路由会导致 404，用 nginx 把 404 的直接重定向到 index，前端就能收到路由事件变更，这是单页应用程序的规则。另一种就是 hash 模式，hash 模式直接被浏览器当做一个标记跳转不会触发资源请求，所以服务器也收不到任何事件。
LiubaiQ 2 小时 28 分钟前 2
最近刚好在看前端路由库源码（ react-router 依赖的前端路由库 history ），核心原理大致如下：
１.Browser History：调用浏览器内置对象 history 的 pushState/replaceState，可以做到更改 document.URL 而不重载页面（重发请求）的效果，document.URL 就是地址栏中显示的地址，也是发送请求时 referrer 首部的值，通过监听浏览器事件 popState/hashChange 来监听前端路由的变化，路由改变时执行所有通过 listen 注册进来的回调；
2.Hash History : 基本和 1 中一样，只是 1 中是以整个 URL 做路由管理，这里则是以 URL 的以部分（片段标识符，Hash ）做路由管理，hash 的改变（直接给 location.hash 赋值）同样不会导致页面重载，监听 hashChange 来执行 listen 注册进来的回调；
前端路由还有重要的一点，就是对不同资源的请求（资源路径不同），必须要返回同一个 HTML 文件，因为 F5，Ctrl+F5，刷新按钮等行为会导致页面重载，重新向地址栏中的 URL 发送请求，如果响应个 404 或者其他页面就有点尴尬了。。。
１.Browser History：调用浏览器内置对象 history 的 pushState/replaceState，可以做到更改 document.URL 而不重载页面（重发请求）的效果，document.URL 就是地址栏中显示的地址，也是发送请求时 referrer 首部的值，通过监听浏览器事件 popState/hashChange 来监听前端路由的变化，路由改变时执行所有通过 listen 注册进来的回调；
2.Hash History : 基本和 1 中一样，只是 1 中是以整个 URL 做路由管理，这里则是以 URL 的以部分（片段标识符，Hash ）做路由管理，hash 的改变（直接给 location.hash 赋值）同样不会导致页面重载，监听 hashChange 来执行 listen 注册进来的回调；
前端路由还有重要的一点，就是对不同资源的请求（资源路径不同），必须要返回同一个 HTML 文件，因为 F5，Ctrl+F5，刷新按钮等行为会导致页面重载，重新向地址栏中的 URL 发送请求，如果响应个 404 或者其他页面就有点尴尬了。。。
lanlanye 1 小时 25 分钟前
一般用了前端路由就不会在 nginx 上设置路由了吧……
通过前后分离的方式，前端路由控制切换切面，然后根据需要展示的内容向后端发起请求，除了初次加载以外，前后端的传输内容只有具体数据。
通过前后分离的方式，前端路由控制切换切面，然后根据需要展示的内容向后端发起请求，除了初次加载以外，前后端的传输内容只有具体数据。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK