如何仅重载单个Turbo Frame的同时更新浏览器地址栏URL

给目标<turbo-frame>标签添加data-turbo-action="advance"属性即可，这个配置是Turbo 7.0+原生支持的能力，开启后Turbo Frame内发生导航时会自动向浏览器历史栈插入新记录，同步更新地址栏URL，不会触发整页重载。
如果不需要保留导航前的历史记录，可将属性值替换为replace，仅更新当前地址栏地址，不会新增可后退的历史条目。

针对你提供的示例，只需要修改cgi-bin/index.html里的turbo-frame声明：

<!-- 修改前 -->
<turbo-frame id='example-frame'>
<!-- 修改后 -->
<turbo-frame id='example-frame' data-turbo-action="advance">

修改后重新启动服务测试，点击Frame内的NEW turbo frame链接即可实现：

• Frame外的lucky bonus number保持不变（公共区域未重载）
• Frame内的query string数值更新
• 浏览器地址栏URL同步更新为带随机参数的新地址

你提供的无服务端依赖的最小测试案例整理如下：

1. 新建项目目录并初始化入口文件

$ mkdir example
$ cd example
$ cat > index.html
<meta http-equiv="Refresh" content="0; url='/cgi-bin/index.html'" />

2. 新建CGI目录并编写动态页面脚本

$ mkdir cgi-bin
$ cat > cgi-bin/index.html
#! /usr/bin/env bash

set -e

echo Content-Type: text/html
echo
sed "s/NEW/$RANDOM/g" << EOF
<html>
  <head>
    <title>DEMO</title>
    <script src="/node_modules/@hotwired/turbo/dist/turbo.es2017-umd.js"></script>
  </head>
  <body>
    <h1>DEMO</h1>
    <p><small>lucky bonus number: $RANDOM</small></p>
    <turbo-frame id='example-frame' data-turbo-action="advance">
        <a href="?NEW">NEW turbo frame</a><br />
        <a href="?NEW" data-turbo-frame="_top">NEW full page</a>
        <p>number in query string: $QUERY_STRING</p>
    </turbo-frame>
    <br />
  </body>
</html>
EOF

3. 赋予执行权限、安装依赖并启动服务

$ chmod +x cgi-bin/index.html
$ npm install --save @hotwired/turbo@7.0.1
$ python3 -m http.server --cgi

• 初始页面状态：
  
• 修改前点击Frame内链接效果（仅Frame内容更新，地址栏无变化）：
  
• 全页刷新链接效果（整页重载，所有内容更新）：
  

内容的提问来源于stack exchange，提问作者Alex028502