V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
James369
V2EX  ›  程序员

前端路由可以和后端路由一起组合使用吗?

  •  
  •   James369 · 2021-07-27 08:45:04 +08:00 · 3399 次点击
    这是一个创建于 975 天前的主题,其中的信息可能已经有所发展或是发生改变。
    前端路由挺有意思的一个东西,url 的路由直接在浏览器完成拦截跳转,都绕过后端服务器了。

    所以对前端路由这个机制还是不大理解,比如在浏览器地址栏直接输入一个 url 地址,也会被前端拦截掉吗?

    那后端比如 nginx 设置的路由规则还有效吗?
    第 1 条附言  ·  2021-07-27 09:26:53 +08:00
    实际项目中一般是怎么用的?
    17 条回复    2021-07-27 19:01:59 +08:00
    loadinger
        1
    loadinger  
       2021-07-27 08:57:17 +08:00
    一般要么用前端的要么用后端的吧...
    dmjob2015222
        2
    dmjob2015222  
       2021-07-27 08:58:06 +08:00
    你说的是单页面应用吧,第一次必须走服务器,后续的就不用了,浏览器就可以控制了
    cw2k13as
        3
    cw2k13as  
       2021-07-27 08:58:28 +08:00
    没有绕过后端服务器,有效,后端路由优先前端路由,后端要配置重定向到 index 前端路由才生效,这是 history 模式。hash 模式也是一样就是
    lybcyd
        4
    lybcyd  
       2021-07-27 09:08:18 +08:00
    这个要看你的部署机制。如果是分开部署,想让前端路由生效,nginx 本来就要进行设置,肯定不会走后端。如果是先后端解析再把页面当作模板返回,那就是后端路由为主了,这种情况下需要后端的 controller 设置一下通配符,把未定义路由统一交给前端解析。
    James369
        5
    James369  
    OP
       2021-07-27 09:17:46 +08:00
    @cw2k13as 后端配置重定向到 index 之后的话,前端还能收到原始的 url 路径吗? 感觉有点懵
    cczeng
        6
    cczeng  
       2021-07-27 09:42:02 +08:00   ❤️ 1
    @James369 默认就是请求后端路由,然后后端没有路由会导致 404,用 nginx 把 404 的直接重定向到 index,前端就能收到路由事件变更,这是单页应用程序的规则。另一种就是 hash 模式,hash 模式直接被浏览器当做一个标记跳转不会触发资源请求,所以服务器也收不到任何事件。
    darknoll
        7
    darknoll  
       2021-07-27 09:43:27 +08:00
    前端路由不刷新网页
    cw2k13as
        8
    cw2k13as  
       2021-07-27 09:57:13 +08:00
    @James369 只是重定向了,路径没变,index 可以解析到
    LiubaiQ
        9
    LiubaiQ  
       2021-07-27 10:24:24 +08:00   ❤️ 4
    最近刚好在看前端路由库源码( react-router 依赖的前端路由库 history ),核心原理大致如下:

    1.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 或者其他页面就有点尴尬了。。。
    otakustay
        10
    otakustay  
       2021-07-27 10:31:28 +08:00
    在浏览器里输入地址再回车,一定是先到后端路由再回前端,前端代码初始化后才能拦截路由的
    lanlanye
        11
    lanlanye  
       2021-07-27 11:26:50 +08:00
    一般用了前端路由就不会在 nginx 上设置路由了吧……
    通过前后分离的方式,前端路由控制切换切面,然后根据需要展示的内容向后端发起请求,除了初次加载以外,前后端的传输内容只有具体数据。
    codehz
        12
    codehz  
       2021-07-27 12:03:19 +08:00 via Android
    前端可以拦截直接输入 url 的情况( service worker
    但是第一次访问肯定不行,所以如果是基于路径的话还是得后端配合)
    netwjx
        13
    netwjx  
       2021-07-27 12:32:20 +08:00
    前后端两个路由全部都生效

    所以需要都进行设置

    确实很麻烦, 所以才需要框架之类工具减少重复
    robinlovemaggie
        14
    robinlovemaggie  
       2021-07-27 13:39:54 +08:00
    简单的说就是:
    前端渲染页面的路由是服务于挂载点 baseUrl 之后静态页面导航,后端路由是负责(含)baseUrl 之前的所有动态路由导航。
    libook
        15
    libook  
       2021-07-27 14:05:09 +08:00
    如果一个域名就只有一个单页面应用,那么可以用 hash 或者拦截 path 变化来实现路由。如果希望一个域名用不同 path 来 host 多个单页面应用,可以用只用 hash 。

    混合使用理论上也可以实现,但是得看具体什么需求,多数情况下为了方便管理和维护,还是建议使用一套方案。
    molvqingtai
        16
    molvqingtai  
       2021-07-27 14:10:14 +08:00   ❤️ 1
    前端路由有两种模式,一种 hash 和 history
    hash 改变请求不会发到后端
    history 就是正常请求,所以需要 nginx 重定向到 index.html
    darknoll
        17
    darknoll  
       2021-07-27 19:01:59 +08:00   ❤️ 1
    @molvqingtai 什么叫 history 是正常请求,正因为 history 的 pushState 不会刷新页面的同时修改 url,所以才能用来做前端路由。在此模式下,刷新网页必须要后端支持返回 index.html
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3022 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 14:59 · PVG 22:59 · LAX 07:59 · JFK 10:59
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.