这是一个创建于 1220 天前的主题，其中的信息可能已经有所发展或是发生改变。
前端路由挺有意思的一个东西，url 的路由直接在浏览器完成拦截跳转，都绕过后端服务器了。
所以对前端路由这个机制还是不大理解，比如在浏览器地址栏直接输入一个 url 地址，也会被前端拦截掉吗？
那后端比如 nginx 设置的路由规则还有效吗？
所以对前端路由这个机制还是不大理解，比如在浏览器地址栏直接输入一个 url 地址，也会被前端拦截掉吗？
那后端比如 nginx 设置的路由规则还有效吗？
第 1 条附言 · 2021-07-27 09:26:53 +08:00
实际项目中一般是怎么用的？
 |
1
loadinger 2021-07-27 08:57:17 +08:00
一般要么用前端的要么用后端的吧...
|
 |
2
dmjob2015222 2021-07-27 08:58:06 +08:00
你说的是单页面应用吧，第一次必须走服务器，后续的就不用了，浏览器就可以控制了
|
 |
3
cw2k13as 2021-07-27 08:58:28 +08:00
没有绕过后端服务器，有效，后端路由优先前端路由，后端要配置重定向到 index 前端路由才生效，这是 history 模式。hash 模式也是一样就是
|
 |
4
lybcyd 2021-07-27 09:08:18 +08:00
这个要看你的部署机制。如果是分开部署，想让前端路由生效，nginx 本来就要进行设置，肯定不会走后端。如果是先后端解析再把页面当作模板返回，那就是后端路由为主了，这种情况下需要后端的 controller 设置一下通配符，把未定义路由统一交给前端解析。
|
 |
6
cczeng 2021-07-27 09:42:02 +08:00  1
@James369 默认就是请求后端路由，然后后端没有路由会导致 404，用 nginx 把 404 的直接重定向到 index，前端就能收到路由事件变更，这是单页应用程序的规则。另一种就是 hash 模式，hash 模式直接被浏览器当做一个标记跳转不会触发资源请求，所以服务器也收不到任何事件。
|
 |
7
darknoll 2021-07-27 09:43:27 +08:00
前端路由不刷新网页
|
 |
9
LiubaiQ 2021-07-27 10:24:24 +08:00 4
最近刚好在看前端路由库源码（ 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 或者其他页面就有点尴尬了。。。 |
 |
10
otakustay 2021-07-27 10:31:28 +08:00
在浏览器里输入地址再回车，一定是先到后端路由再回前端，前端代码初始化后才能拦截路由的
|
 |
11
lanlanye 2021-07-27 11:26:50 +08:00
一般用了前端路由就不会在 nginx 上设置路由了吧……
通过前后分离的方式，前端路由控制切换切面，然后根据需要展示的内容向后端发起请求，除了初次加载以外，前后端的传输内容只有具体数据。 |
 |
12
codehz 2021-07-27 12:03:19 +08:00 via Android
前端可以拦截直接输入 url 的情况（ service worker
但是第一次访问肯定不行，所以如果是基于路径的话还是得后端配合） |
 |
13
netwjx 2021-07-27 12:32:20 +08:00
前后端两个路由全部都生效
所以需要都进行设置 确实很麻烦, 所以才需要框架之类工具减少重复 |
 |
14
robinlovemaggie 2021-07-27 13:39:54 +08:00
简单的说就是：
前端渲染页面的路由是服务于挂载点 baseUrl 之后静态页面导航，后端路由是负责(含)baseUrl 之前的所有动态路由导航。 |
 |
15
libook 2021-07-27 14:05:09 +08:00
如果一个域名就只有一个单页面应用，那么可以用 hash 或者拦截 path 变化来实现路由。如果希望一个域名用不同 path 来 host 多个单页面应用，可以用只用 hash 。
混合使用理论上也可以实现，但是得看具体什么需求，多数情况下为了方便管理和维护，还是建议使用一套方案。 |
 |
16
molvqingtai 2021-07-27 14:10:14 +08:00 1
前端路由有两种模式，一种 hash 和 history
hash 改变请求不会发到后端 history 就是正常请求，所以需要 nginx 重定向到 index.html |
|
17
darknoll 2021-07-27 19:01:59 +08:00 1
@molvqingtai 什么叫 history 是正常请求，正因为 history 的 pushState 不会刷新页面的同时修改 url，所以才能用来做前端路由。在此模式下，刷新网页必须要后端支持返回 index.html
|
Select Language