Next.js 链接与导航：页面间无缝切换

链接与导航：页面间无缝切换

关键要点
  • Next.js 提供了 <Link> 组件和程序化导航方法，实现页面间高效、无缝的切换。
  • <Link> 组件利用客户端导航和预加载技术，优化用户体验和性能。
  • 程序化导航通过 useRouter 钩子（Pages Router）或 useRouter/usePathname（App Router）实现动态跳转。
  • 涵盖 App Router 和 Pages Router 的导航实现、预加载优化和常见使用场景。
  • 提供代码示例、最佳实践和常见问题解决方案，适合初学者和进阶开发者。
为什么需要这篇文章？

在现代 Web 应用中，页面间的导航是用户体验的核心部分。Next.js 通过 <Link> 组件和程序化导航提供了简单而强大的导航解决方案，消除了传统 <a> 标签的页面刷新问题，同时支持路由预加载以提升性能。无论是构建静态网站还是动态应用，理解 Next.js 的导航机制都至关重要。本文将深入介绍 <Link> 组件和程序化导航的实现方法，展示如何在 App Router 和 Pages Router 中实现无缝切换，并提供优化技巧和实践指导。

目标
  • 解释 <Link> 组件的工作原理和使用场景。
  • 展示程序化导航的实现方法（如 router.push、router.replace）。
  • 比较 App Router 和 Pages Router 的导航机制。
  • 提供导航优化技巧（如预加载、条件导航）和错误处理方法。
  • 分享大型项目中的导航组织实践和常见问题解决方案。

链接与导航：页面间无缝切换

1. 引言

Next.js 是一个基于 React 的全栈框架，其内置的导航系统通过 <Link> 组件和程序化导航方法实现了页面间的高效、无缝切换。与传统 HTML 的 <a> 标签导致页面刷新不同，Next.js 的导航利用客户端渲染和路由预加载技术，提供快速的页面过渡和优化的用户体验。这种设计不仅提升了性能，还简化了开发流程，使开发者能够轻松构建复杂的导航逻辑。

Next.js 支持两种路由方式：App Router（基于 app/ 目录，推荐用于新项目）和 Pages Router（基于 pages/ 目录，适合现有项目）。两种方式都支持 <Link> 组件和程序化导航，但实现细节有所不同。本文将详细介绍 <Link> 组件和程序化导航的工作原理，展示如何在 App Router 和 Pages Router 中实现页面切换，并通过代码示例、最佳实践和常见问题解决方案，帮助开发者掌握 Next.js 的导航系统。

通过本文，您将学会：

  • 理解 <Link> 组件的工作原理和配置选项。
  • 使用程序化导航（如 router.push 和 useRouter）实现动态跳转。
  • 比较 App Router 和 Pages Router 的导航实现。
  • 应用导航优化技巧（如预加载、条件导航）和错误处理策略。
  • 探索大型项目中的导航组织方法。

2. Next.js 导航的基本原理

Next.js 的导航系统基于客户端导航，结合文件系统路由（App Router 或 Pages Router），通过以下方式实现页面间无缝切换：

  • <Link> 组件：
    • Next.js 提供的 React 组件，用于声明式导航。
    • 自动预加载目标页面，减少加载时间。
    • 支持动态路由、查询参数和外部链接。
  • 程序化导航：
    • 通过 useRouter（Pages Router）或 useRouter/usePathname（App Router）实现动态跳转。
    • 支持 push（添加历史记录）、replace（替换历史记录）和 back（返回上一页）等方法。
  • 路由预加载：
    • Next.js 自动为 <Link> 组件预加载目标页面的代码和数据。
    • 优化首屏加载和页面过渡性能。
  • 客户端与服务器协调：
    • 客户端导航在浏览器端处理页面切换，避免整页刷新。
    • 服务器端渲染（SSR）或静态生成（SSG）确保初始加载的 SEO 和性能。

2.1 App Router vs Pages Router

特性App RouterPages Router
路由目录app/pages/
导航钩子useRouter, usePathname, useSearchParamsuseRouter
<Link> 组件支持所有功能，集成服务器组件支持所有功能，传统客户端渲染
预加载默认启用，优化更细粒度默认启用，稍有限制
适用场景新项目、服务器组件、复杂导航现有项目、简单导航

App Router 是 Next.js 的未来方向，支持服务器组件和更细粒度的预加载，推荐新项目使用。本文将主要基于 App Router 讲解导航，但也会覆盖 Pages Router 的实现方法。

3. <Link> 组件：声明式导航

<Link> 组件是 Next.js 提供的核心导航工具，用于在页面间创建链接，支持客户端导航和路由预加载。

3.1 基本使用

  • 安装：<Link> 组件内置于 next/link，无需额外安装。

  • 项目结构（App Router）：

    app/
├── page.tsx          # /
├── about/
│   ├── page.tsx      # /about
├── blog/
│   ├── [slug]/
│       ├── page.tsx  # /blog/:slug

  • 代码示例（app/page.tsx）：

    import Link from 'next/link';export default function Home() {return (<main className="flex min-h-screen flex-col items-center justify-center p-8"><h1 className="text-4xl font-bold">首页</h1><nav><ul className="mt-4 space-y-2"><li><Link href="/about" className="text-blue-600 hover:underline">关于我们</Link></li><li><Link href="/blog/my-first-post" className="text-blue-600 hover:underline">第一篇博客</Link></li></ul></nav></main>);
}

  • 效果：

    • 点击“关于我们”跳转到 /about，无需页面刷新。
    • 点击“第一篇博客”跳转到 /blog/my-first-post。
    • 目标页面在鼠标悬停 <Link> 时自动预加载。

3.2 <Link> 的配置选项

<Link> 组件支持多种属性，用于控制导航行为：

  • href：目标路径（必需），支持字符串或对象。

    <Link href="/about">关于</Link>
<Link href={{ pathname: '/blog/[slug]', query: { slug: 'my-post' } }}>博客
</Link>

  • replace：替换历史记录（类似 router.replace）。

    <Link href="/about" replace>关于（无历史记录）
</Link>

  • prefetch：控制是否预加载（默认 true）。

    <Link href="/about" prefetch={false}>关于（禁用预加载）
</Link>

  • scroll：控制跳转后是否滚动到顶部（默认 true）。

    <Link href="/about" scroll={false}>关于（保留滚动位置）
</Link>

  • legacyBehavior（Pages Router）：

    • 启用传统行为，兼容旧版本。
    • 示例：
      <Link href="/about" legacyBehavior><a>关于</a>
</Link>

3.3 动态路由导航

<Link> 支持动态路由，通过 href 传递参数。

  • 代码示例（app/blog/page.tsx）：

    import Link from 'next/link';export default function BlogList() {const posts = [{ slug: 'post1', title: '第一篇文章' },{ slug: 'post2', title: '第二篇文章' },];return (<main className="p-8"><h1 className="text-4xl font-bold">博客列表</h1><ul className="mt-4 space-y-2">{posts.map((post) => (<li key={post.slug}><Link href={`/blog/${post.slug}`} className="text-blue-600 hover:underline">{post.title}</Link></li>))}</ul></main>);
}

  • 效果：

    • 生成链接 /blog/post1 和 /blog/post2。
    • 动态路径自动预加载。

3.4 外部链接

对于外部链接，<Link> 可与 <a> 标签结合使用。

  • 代码示例：

    <Link href="https://example.com"><a target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">外部网站</a>
</Link>

  • 注意：外部链接不会触发预加载，行为与普通 <a> 标签相同。

4. 程序化导航

程序化导航通过 JavaScript 动态控制页面跳转，适合交互式场景（如表单提交、按钮点击）。

4.1 App Router 中的程序化导航

App Router 使用 next/navigation 提供的钩子：useRouter、usePathname 和 useSearchParams。

  • 项目结构：

    app/
├── page.tsx          # /
├── profile/
│   ├── [userId]/
│       ├── page.tsx  # /profile/:userId

  • 代码示例（app/page.tsx）：

    'use client';
import { useRouter } from 'next/navigation';export default function Home() {const router = useRouter();const handleNavigate = () => {router.push('/profile/123');};return (<main className="flex min-h-screen flex-col items-center justify-center p-8"><h1 className="text-4xl font-bold">首页</h1><buttononClick={handleNavigate}className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">跳转到用户 123 的资料</button></main>);
}

  • 常用方法：

    • router.push(path)：跳转并添加历史记录。
    • router.replace(path)：跳转并替换历史记录。
    • router.back()：返回上一页。
    • router.forward()：前进到下一页。
    • router.refresh()：刷新当前页面。

  • 查询参数：

    router.push({pathname: '/profile/[userId]',query: { userId: '123', tab: 'settings' },
});

  • 访问当前路径：

    import { usePathname, useSearchParams } from 'next/navigation';export default function Profile() {const pathname = usePathname();const searchParams = useSearchParams();const tab = searchParams.get('tab');return (<div><p>当前路径: {pathname}</p><p>选项卡: {tab}</p></div>);
}

4.2 Pages Router 中的程序化导航

Pages Router 使用 next/router 提供的 useRouter 钩子。

  • 代码示例（pages/index.js）：

    import { useRouter } from 'next/router';export default function Home() {const router = useRouter();const handleNavigate = () => {router.push('/profile/123');};return (<main className="flex min-h-screen flex-col items-center justify-center"><h1 className="text-4xl font-bold">首页</h1><buttononClick={handleNavigate}className="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">跳转到用户 123 的资料</button></main>);
}

  • 查询参数：

    router.push({pathname: '/profile/[userId]',query: { userId: '123', tab: 'settings' },
});

5. 导航优化与配置

5.1 路由预加载

Next.js 自动为 <Link> 组件预加载目标页面，提升性能。

  • 控制预加载：

    <Link href="/about" prefetch={false}>关于（禁用预加载）
</Link>

  • 全局配置（next.config.js）：

    module.exports = {experimental: {linkPreload: true, // 启用更细粒度的预加载},
};

5.2 条件导航

根据条件动态跳转。

  • 代码示例（App Router）：
    'use client';
import { useRouter } from 'next/navigation';
import { useState } from 'react';export default function Login() {const router = useRouter();const [userId, setUserId] = useState('');const handleLogin = () => {if (userId) {router.push(`/profile/${userId}`);} else {alert('请输入用户 ID');}};return (<main className="p-8"><inputtype="text"value={userId}onChange={(e) => setUserId(e.target.value)}className="border p-2"placeholder="输入用户 ID"/><buttononClick={handleLogin}className="ml-2 px-4 py-2 bg-blue-600 text-white rounded">登录</button></main>);
}

5.3 环境变量

为导航配置动态路径：

  • .env.local：
    BASE_URL=/app
  • 使用：
    <Link href={`${process.env.BASE_URL}/about`}>关于</Link>

5.4 动态导航与数据获取

结合数据获取动态生成导航链接。

  • 代码示例（App Router）：
    import Link from 'next/link';async function fetchPosts() {const res = await fetch('https://api.example.com/posts');return res.json();
}export default async function BlogList() {const posts = await fetchPosts();return (<main className="p-8"><h1 className="text-4xl font-bold">博客列表</h1><ul className="mt-4 space-y-2">{posts.map((post) => (<li key={post.slug}><Link href={`/blog/${post.slug}`} className="text-blue-600 hover:underline">{post.title}</Link></li>))}</ul></main>);
}

6. 使用场景

6.1 导航菜单

创建全局导航栏：

// app/components/Header.tsx
import Link from 'next/link';export default function Header() {return (<header className="bg-blue-600 text-white p-4"><nav><ul className="flex space-x-4"><li><Link href="/" className="hover:underline">首页</Link></li><li><Link href="/about" className="hover:underline">关于</Link></li><li><Link href="/blog" className="hover:underline">博客</Link></li></ul></nav></header>);
}

6.2 动态列表导航

显示动态生成的链接：

// app/blog/page.tsx
import Link from 'next/link';export default async function BlogList() {const posts = [{ slug: 'post1', title: '第一篇文章' },{ slug: 'post2', title: '第二篇文章' },];return (<main className="p-8"><h1 className="text-4xl font-bold">博客列表</h1><ul className="mt-4 space-y-2">{posts.map((post) => (<li key={post.slug}><Link href={`/blog/${post.slug}`} className="text-blue-600 hover:underline">{post.title}</Link></li>))}</ul></main>);
}

6.3 表单提交跳转

表单提交后动态跳转：

// app/login/page.tsx
'use client';
import { useRouter } from 'next/navigation';
import { useState } from 'react';export default function Login() {const router = useRouter();const [username, setUsername] = useState('');const handleSubmit = (e: React.FormEvent) => {e.preventDefault();if (username) {router.push(`/profile/${username}`);}};return (<main className="p-8"><form onSubmit={handleSubmit}><inputtype="text"value={username}onChange={(e) => setUsername(e.target.value)}className="border p-2"placeholder="输入用户名"/><button type="submit" className="ml-2 px-4 py-2 bg-blue-600 text-white rounded">提交</button></form></main>);
}

7. 最佳实践

  • 使用 <Link> 替代 <a>：确保客户端导航和预加载。

  • 类型安全（TypeScript）：

    interface Post {slug: string;title: string;
}const posts: Post[] = [{ slug: 'post1', title: '第一篇文章' },{ slug: 'post2', title: '第二篇文章' },
];

  • 优化预加载：为低优先级页面设置 prefetch={false}。

  • 错误处理：验证导航目标：

    const handleNavigate = async () => {const exists = await checkUserExists(userId);if (exists) {router.push(`/profile/${userId}`);} else {alert('用户不存在');}
};

  • SEO 优化：为动态页面设置元数据：

    export async function generateMetadata({ params }: { params: { slug: string } }) {const post = await fetchPost(params.slug);return {title: post.title,description: post.excerpt,};
}

8. 常见问题及解决方案

问题解决方案
<Link> 不触发导航确保 href 正确，检查路由文件是否存在。
程序化导航失败添加 'use client' 指令，确保使用 useRouter。
预加载导致性能问题对低优先级页面设置 prefetch={false}。
查询参数未生效使用对象形式的 href 或 router.push。
外部链接行为异常使用 <a> 标签并添加 target="_blank" 和 rel="noopener noreferrer"。

9. 大型项目中的导航组织

对于大型项目，推荐以下结构：

app/
├── components/
│   ├── Header.tsx
│   ├── Footer.tsx
├── blog/
│   ├── [slug]/
│   │   ├── page.tsx
│   ├── page.tsx
├── profile/
│   ├── [userId]/
│   │   ├── page.tsx
├── layout.tsx
├── page.tsx

  • 全局导航：在 components/Header.tsx 中定义导航栏。

  • 动态导航：将导航数据提取到 lib/：

    // lib/navLinks.ts
export const navLinks = [{ href: '/', label: '首页' },{ href: '/about', label: '关于' },{ href: '/blog', label: '博客' },
];

  • 使用：

    import { navLinks } from '@/lib/navLinks';
import Link from 'next/link';export default function Header() {return (<nav><ul className="flex space-x-4">{navLinks.map((link) => (<li key={link.href}><Link href={link.href} className="text-blue-600 hover:underline">{link.label}</Link></li>))}</ul></nav>);
}

10. 下一步

掌握导航后，您可以：

  • 实现复杂导航逻辑（如条件跳转）。
  • 集成无头 CMS 动态生成导航链接。
  • 配置中间件控制导航行为。
  • 部署应用并测试导航性能。

总结

Next.js 的 <Link> 组件和程序化导航通过客户端导航和预加载技术，实现了页面间的无缝切换。App Router 和 Pages Router 提供了灵活的导航实现，适用于各种场景。本文通过详细的代码示例，介绍了 <Link> 的使用、程序化导航的实现方法以及优化技巧和常见问题解决方案。掌握导航机制将为您的 Next.js 开发提供坚实基础，助力构建高效、用户友好的 Web 应用。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/diannao/94559.shtml
繁体地址，请注明出处：http://hk.pswp.cn/diannao/94559.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

根据经纬度（从nc格式环境数据文件中）提取环境因子

根据经纬度（从nc格式环境数据文件中）提取环境因子

根据经纬度&#xff08;从nc格式环境数据文件中&#xff09;提取环境因子 文章目录前言一、准备所需文件二、代码分享总结前言 本文主要利用nc格式环境数据文件和物种经纬度分布文件&#xff0c;根据经纬度&#xff08;从nc格式环境数据文件中&#xff09;提取环境因子 一、准…
阅读更多...
Uniapp 自定义 Tabbar 实现教程

Uniapp 自定义 Tabbar 实现教程

Uniapp 自定义 Tabbar 实现教程1. 简介2. 实现步骤2.1 创建自定义 Tabbar 组件2.2 配置 pages.json3.1 路由映射3.2 样式设计3.3 图标处理4. 常见问题及解决方案4.1 页面跳转问题4.2 样式适配问题4.3 性能优化5. 扩展功能5.1 添加徽标5.2 添加动画效果6. 总结1. 简介 在 Uniap…
阅读更多...
JuiceFS存储

JuiceFS存储

因语雀与csdn markdown 格式有区别&#xff0c;请查看原文&#xff1a; https://www.yuque.com/dycloud/pss8ys 一、JuiceFS 介绍 1.1 JuiceFS 是什么 JuiceFS 是一款面向云环境设计的高性能 POSIX 文件系统&#xff0c;核心能力是将对象存储转化为全功能文件系统。它采用独…
阅读更多...
【HarmonyOS Next之旅】DevEco Studio使用指南(三十八) -＞ 构建HAR

【HarmonyOS Next之旅】DevEco Studio使用指南(三十八) -＞ 构建HAR

目录 1 -> 前言 2 -> 使用约束 3 -> 创建模块 4 -> 构建HAR 4.1 -> 以debug模式构建HAR 4.2 -> 以release模式构建HAR 4.3 -> 构建字节码格式的HAR 4.4 -> 对HAR进行签名 1 -> 前言 构建模式&#xff1a;DevEco Studio默认提供debug和rele…
阅读更多...
93、【OS】【Nuttx】【构建】cmake menuconfig 目标

93、【OS】【Nuttx】【构建】cmake menuconfig 目标

【声明】本博客所有内容均为个人业余时间创作&#xff0c;所述技术案例均来自公开开源项目&#xff08;如Github&#xff0c;Apache基金会&#xff09;&#xff0c;不涉及任何企业机密或未公开技术&#xff0c;如有侵权请联系删除 背景 接之前 blog 【OS】【Nuttx】【构建】cm…
阅读更多...
React 表单处理：移动端输入场景下的卡顿问题与防抖优化方案

React 表单处理：移动端输入场景下的卡顿问题与防抖优化方案

文章目录每日一句正能量前言一、问题场景与表现二、技术攻坚过程三、优化效果与经验沉淀每日一句正能量 山再高&#xff0c;往上攀&#xff0c;总能登顶&#xff1b;路再长&#xff0c;走下去&#xff0c;终将到达。每日一励&#xff0c;勇往直前。 前言 在移动端 React 项目开…
阅读更多...
数据安全防护所需要的关键要素

数据安全防护所需要的关键要素

数据安全防护是一个覆盖数据全生命周期&#xff08;采集、存储、传输、处理、销毁&#xff09;、融合技术、管理、流程与人员的系统性工程。其核心目标是保障数据的​​保密性&#xff08;Confidentiality&#xff09;、完整性&#xff08;Integrity&#xff09;、可用性&#…
阅读更多...
【JavaEE】(8) 网络原理 HTTP/HTTPS

【JavaEE】(8) 网络原理 HTTP/HTTPS

一、什么是 HTTP 协议 上节说到&#xff0c;应用层的协议需要约定通信的内容和数据格式。我们可以自定义应用层协议&#xff0c;也可以基于现成的应用层协议进行开发。协议的种类很多&#xff0c;最常见的之一就是 HTTP&#xff0c;广泛用于网站和手机 App。准确来说&#xff0…
阅读更多...
C语言的数组与字符串练习题4

C语言的数组与字符串练习题4

C语言的数组与字符串练习题4 16. 数组元素去重 题目描述： 编写一个C程序，输入一组整数存储在数组中，去除数组中的重复元素，并输出去重后的数组。 解题思路： 遍历数组，对于每个元素，检查它之前是否已经存在相同的元素。如果不存在，则将其保留；否则，跳过。可以使用一…
阅读更多...
Transformers简单介绍 - 来源于huggingface

Transformers简单介绍 - 来源于huggingface

Transformers介绍 - 来源于huggingface 文章目录Transformers介绍 - 来源于huggingfaceTransformers能做什么pipeline()函数零样本分类推理API完形填空命名实体识别问答摘要提取翻译transformers是如何工作的transformers的具体组成注意力层机制transformers原始结构architectu…
阅读更多...
template＜typename R = void＞ 意义

template＜typename R = void＞ 意义

在 C 中&#xff0c;template<typename R void> 表示定义一个模板参数 R&#xff0c;其默认类型为 void。这意味着&#xff1a;如果用户没有显式指定 R&#xff0c;则 R 默认为 void。如果用户显式指定了 R&#xff08;如 template<typename R void> 后面跟着 &l…
阅读更多...
国产3D大型装配设计新突破①：图纸打开设计双加速 | 中望3D 2026

国产3D大型装配设计新突破①：图纸打开设计双加速 | 中望3D 2026

本文为CAD芯智库整理&#xff0c;未经允许请勿复制、转载&#xff01;在中望3D 2026的新版中&#xff0c;不仅在设计效率上进行了重大优化&#xff0c;更是在装配方面实现了突破性的改进&#xff0c;让每一个项目都能快速、精确地从概念变为现实。 中望3D2026亮点速递装配篇将…
阅读更多...
游戏开发状态机与行为树的优缺点

游戏开发状态机与行为树的优缺点

在游戏开发中&#xff0c;状态机&#xff08;Finite State Machine, FSM&#xff09; 和行为树&#xff08;Behavior Tree, BT&#xff09; 是两种常用的 AI 逻辑控制框架&#xff0c;分别适用于不同场景&#xff0c;其优缺点对比可从灵活性、维护成本、适用场景等多个维度分析…
阅读更多...
Linux下ELF文件的介绍

Linux下ELF文件的介绍

目录 1.温故知新 2.ELF文件介绍 3.ELF文件组成 4.ELF文件形成到加载 5.连接过程 1.温故知新 上一篇博客&#xff0c;我们介绍了我们的动静态&#xff0c;知道了我们的库其实也是文件&#xff0c;如果我们想写一个库也是可以的&#xff0c;我们的把我们的库文件编译成.o文件…
阅读更多...
人工智能领域、图欧科技、IMYAI智能助手2025年6月更新月报

人工智能领域、图欧科技、IMYAI智能助手2025年6月更新月报

2025年6月AI领域重要模型更新与平台优化汇总 摘要&#xff1a; 本文汇总了2025年6月期间AI领域发布的多项重要模型更新及平台功能优化信息&#xff0c;涵盖Google Gemini、阿里通义万相、字节豆包、百度文心一言、MiniMax海螺02、Google Veo3、快手可灵2.1、FLUX Kontext等模型…
阅读更多...
从零开始学Express，理解服务器，路由于中间件

从零开始学Express，理解服务器，路由于中间件

当我们初学前端时&#xff0c;常常只关注页面效果和交互&#xff0c;但随着项目复杂度提升&#xff0c;我们迟早会遇到“服务端”的问题&#xff1a;如何让一个页面的数据是从数据库来的&#xff1f;怎么让不同的用户看到不同的内容&#xff1f;这时候&#xff0c;我们就需要一…
阅读更多...
Codeforces Round 987 (Div. 2)

Codeforces Round 987 (Div. 2)

ABC 略D预处理出每个位置的前缀最大和后缀最小。从后向前枚举&#xff0c;如果一个数无法后移&#xff0c;那么答案就是最大前缀&#xff0c;否则答案要不是前缀最大&#xff0c;要不就是这个数先移到前缀最大位置再移到能移到的最大的位置此处的答案。用线段树维护#include<…
阅读更多...
Javascript/ES6+/Typescript重点内容篇——手撕(待总结）

Javascript/ES6+/Typescript重点内容篇——手撕(待总结）

前端核心知识点梳理与面试题详解 1. Promise 核心知识点 Promise 是异步编程的解决方案&#xff0c;用于处理异步操作三种状态&#xff1a;pending&#xff08;进行中&#xff09;、fulfilled&#xff08;已成功&#xff09;、rejected&#xff08;已失败&#xff09;状态一旦改…
阅读更多...
[自动化Adapt] 父子事件| 冗余过滤 | SQLite | SQLAlchemy | 会话工厂 | Alembic

[自动化Adapt] 父子事件| 冗余过滤 | SQLite | SQLAlchemy | 会话工厂 | Alembic

第五章&#xff1a;事件处理与融合 欢迎回到OpenAdapt探索之旅~ 在第四章&#xff1a;系统配置中&#xff0c;我们掌握了如何定制化系统参数。更早的第一章&#xff1a;录制引擎则展示了系统如何捕获海量原始操作数据。 假设我们需要训练机器人输入"hello"一词。原…
阅读更多...
组合期权：跨式策略

组合期权：跨式策略

文章目录0.简介1.买入跨式组合&#xff08;Long Straddle&#xff09;1.1 适用场景​1.2 合约选择1.3 损益分析1.4 案例示范2.卖出跨式组合&#xff08;Short Straddle&#xff09;2.1 适用场景​2.2 合约选择2.3 损益分析2.4 案例示范3.小结参考文献0.简介 跨式策略是一种交易…
阅读更多...
最新文章

Copyright @ 2022~2023