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
英文地址，請注明出處：http://en.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