Vue ⑥-路由

在這里插入圖片描述

單頁應用程序

單頁應用程序，即 Single-Page Application，簡稱 SPA，是一種使用 JavaScript、HTML 和 CSS 構建的 Web 應用程序。SPA 的核心是前端路由，它使得用戶在訪問網站時，只需加載一次頁面，然后通過前端路由來切換頁面，而不需要重新加載整個頁面。所有功能在 一個 html 頁面 上實現
在這里插入圖片描述

單頁面應用程序，之所以開發效率高，性能高，用戶體驗好

最大的原因就是：頁面按需更新

要按需更新，首先就需要明確：訪問路徑 和 組件 的對應關系！

訪問路徑 和 組件的對應關系如何確定呢？ 路由

路由

生活中的路由：設備和 ip 的映射關系

比如路由器通過源 ip 和目的 ip 確定數據包的下一跳。

Vue中路由：路徑 和 組件 的 映射 關系
在這里插入圖片描述

VueRouter

目標：認識插件 VueRouter，掌握 VueRouter 的基本使用步驟

作用：修改地址欄路徑時，切換顯示匹配的組件

說明：Vue 官方的一個路由插件，是一個第三方包

官網：https://v3.router.vuejs.org/zh/

VueRouter 的 使用 (5 + 2)

5個基礎步驟 (固定)

  1. 下載： 下載 VueRouter 模塊到當前工程
npm install vue-router
  1. 創建 ./router/index.js 文件，引入 VueRouter 模塊
import VueRouter from 'vue-router'
  1. 安裝注冊
Vue.use(VueRouter)
  1. 創建路由對象
const router = new VueRouter()
  1. 注入，將路由對象注入到 new Vue 實例（main.js）中，建立關聯
import router from './router/index'new Vue({render: h => h(App),router
}).$mount('#app')

2 個核心步驟

  1. 創建需要的組件 (views目錄)，配置路由規則

這里創建 Find.vue My.vue Friend.vue 三個組件 (在 ./views 目錄下)

  1. 配置路由規則，在 ./router/index.js 文件中配置路由規則
import Find from './views/Find'
import My from './views/My'
import Friend from './views/Friend'// 創建了一個路由對象
const router = new VueRouter({// routes 路由規則們// route  一條路由規則 { path: 路徑, component: 組件 }routes: [{ path: '/find', component: Find },{ path: '/my', component: My },{ path: '/friend', component: Friend },]
})export default router
  1. 配置導航，配置路由出口(路徑匹配的組件顯示的位置)，在 App.vue 文件中配置導航
<template><div><div class="footer_wrap"><a href="#/find">發現音樂</a><a href="#/my">我的音樂</a><a href="#/friend">朋友</a></div><div class="top"><!-- 路由出口 → 匹配的組件所展示的位置 --><router-view></router-view></div></div>
</template>

組件存放目錄問題

注意：.vue文件 本質無區別。
路由相關的組件，為什么放在 views 目錄呢？組件分類

組件分類： .vue文件分2類： 頁面組件 & 復用組件

分類開來 更易維護

  • src/views 文件夾
    • 頁面組件 - 頁面展示 - 配合路由用
  • src/components 文件夾
    • 復用組件 - 展示數據 - 常用于復用

聲明式導航

導航鏈接

需求：實現導航高亮效果

vue-router 提供了一個全局組件 router-link (取代 a 標簽)

  • 能跳轉，配置 to 屬性指定路徑(必須) 。本質還是 a 標簽 ，to 無需 #
  • 能高亮，默認就會提供高亮類名，可以直接設置高亮樣式
<!-- 原來的 -->
<a href="#/find">發現音樂</a>
<a href="#/my">我的音樂</a>
<a href="#/friend">朋友</a><!-- 改成 -->
<router-link to="/find">發現音樂</router-link>
<router-link to="/my">我的音樂</router-link>
<router-link to="/friend">朋友</router-link>

精準匹配 & 模糊匹配

說明：我們發現 router-link 自動給當前導航添加了 兩個高亮類名
在這里插入圖片描述

  • router-link-active：模糊匹配 (用的多)

    • to="/my" 可以匹配 /my /my/a /my/b …

  • router-link-exact-active：精確匹配

    • to="/my" 僅可以匹配 /my

自定義高亮類名

說明：router-link 的 兩個高亮類名太長了，我們希望能定制怎么辦？

語法：

const router = new VueRouter({routes: [...],linkActiveClass: "類名1", // 模糊匹配linkExactActiveClass: "類名2" // 精確匹配
})

在這里插入圖片描述

跳轉傳參

目標：在跳轉路由時, 進行傳值

查詢參數傳參

語法格式如下：

  • to="/path?參數名=值"
  • 對應頁面組件接收傳遞過來的值
    • $route.query.參數名

App.vue

<template><div id="app"><div class="link"><router-link to="/home">首頁</router-link><router-link to="/search">搜索頁</router-link></div><router-view></router-view></div>
</template>

router/index.js

const router = new VueRouter({routes: [{ path: '/home', component: Home },{ path: '/search', component: Search }]
})

Home.vue

<div class="hot-link">熱門搜索：<router-link to="/search?key=程序員">程序員</router-link><router-link to="/search?ke=前端培訓">前端培訓</router-link><router-link to="/search?key=如何成為前端大牛">如何成為前端大牛</router-link>
</div>

Search.vue

<template><div class="search"><p>搜索關鍵字: {{ $route.query.key }} </p><p>搜索結果: </p><ul><li>.............</li></ul></div>
</template><script>
export default {name: 'MyFriend',created () {// 在created中，獲取路由參數// this.$route.query.參數名 獲取console.log(this.$route.query.key)}
}
</script>
動態路由傳參
  1. 配置動態路由，在 ./router/index.js 文件中配置路由規則
const router = new VueRouter({routes: [{ path: '/home', component: Home },{ path: '/search/:words', component: Search }]
})

  1. 配置導航鏈接：to="/path/參數值"

  2. 對應頁面組件接收傳遞過來的值：$route.params.參數名

App.vue

<template><div id="app"><div class="link"><router-link to="/home">首頁</router-link><router-link to="/search">搜索頁</router-link></div><router-view></router-view></div>
</template>

Home.vue

<div class="hot-link">熱門搜索：<router-link to="/search/程序員">程序員</router-link><router-link to="/search/前端培訓">前端培訓</router-link><router-link to="/search/如何成為前端大牛">如何成為前端大牛</router-link>
</div>

Search.vue

<template><div class="search"><p>搜索關鍵字: {{ $route.params.words }} </p><p>搜索結果: </p><ul><li>.............</li></ul></div>
</template><script>
export default {name: 'MyFriend',created () {// 在created中，獲取路由參數// this.$route.query.參數名 獲取查詢參數// this.$route.params.參數名 獲取動態路由參數console.log(this.$route.params.words);}
}
</script>
動態路由參數可選符

問題：配了路由 path: "/search/:words" 為什么按下面步驟操作，會未匹配到組件，顯示空白？

原因： /search/:words 表示，必須要傳參數。如果不傳參數，也希望匹配，可以加個可選符 "?"。

{ path: '/search/:words?', component: Search }
兩種傳參方式的區別

查詢參數傳參 (比較適合傳多個參數)

  • 跳轉：to="/path?參數名=值&參數名2=值"
  • 獲取：$route.query.參數名

動態路由傳參 (優雅簡潔，傳單個參數比較方便)

  • 配置動態路由：path: "/path/:參數名"
  • 跳轉：to="/path/參數值"
  • 獲取：$route.params.參數名

路由重定向

問題：網頁打開， url 默認是 / 路徑，未匹配到組件時，會出現空白

說明：重定向 → 匹配path后, 強制跳轉path路徑

語法： { path: 匹配路徑, redirect: 重定向到的路徑 },

const router = new VueRouter({routes: [{ path: '/', redirect: '/home' }, // 重定向到 /home{ path: '/home', component: Home },{ path: '/search/:words?', component: Search }]
})

404

作用：當路徑找不到匹配時，給個提示頁面

位置：配在路由最后

語法：path: "*" (任意路徑) – 前面不匹配就命中最后這個

const router = new VueRouter({routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ path: '/search/:words?', component: Search },{ path: '*', component: NotFound }]
})

模式設置

問題: 路由的路徑看起來不自然，有#，能否切成真正路徑形式？

  • hash路由(默認) 例如: http://localhost:8080/#/home
const router = new VueRouter({mode: 'hash',routes: [...]
})
  • history路由(常用) 例如: http://localhost:8080/home
const router = new VueRouter({mode: 'history',routes: [...]
})

編程式導航

基本跳轉

問題：點擊按鈕跳轉如何實現？

編程式導航：用 JS 代碼來進行跳轉

兩種語法：

  • path 路徑跳轉（簡易方便）
this.$router.push('路由路徑')this.$router.push({path: '路由路徑'
})
  • name 命名路由跳轉（適合 path 路徑長的場景）
this.$router.push({name: '路由名'
})

const router = new VueRouter({routes: [{ name: '路由名', path: '/path/xxx', component: XXX },]
})

Home.vue

<template><div class="home"><div class="logo-box"></div><div class="search-box"><input type="text"><button @click="goSearch">搜索一下</button></div><div class="hot-link">熱門搜索：<router-link to="/search/程序員">程序員</router-link><router-link to="/search/前端培訓">前端培訓</router-link><router-link to="/search/如何成為前端大牛">如何成為前端大牛</router-link></div></div>
</template><script>
export default {name: 'FindMusic',methods: {goSearch () {// 1. 通過路徑的方式跳轉// (1) this.$router.push('路由路徑') [簡寫]// this.$router.push('/search')// (2) this.$router.push({     [完整寫法]//         path: '路由路徑' //     })// this.$router.push({//   path: '/search'// })// 2. 通過命名路由的方式跳轉 (需要給路由起名字) 適合長路徑//    this.$router.push({//        name: '路由名'//    })this.$router.push({name: 'search'})}}
}
</script>

路由傳參

問題：點擊搜索按鈕，跳轉需要傳參如何實現？

兩種傳參方式：查詢參數 + 動態路由傳參

兩種跳轉方式，對于兩種傳參方式都支持：

  • path 路徑跳轉傳參(query傳參)
this.$router.push('/路徑?參數名1=參數值1&參數2=參數值2')this.$router.push({path: '/路徑',query: {參數名1: '參數值1',參數名2: '參數值2'}
})
  • path 路徑跳轉傳參 (動態路由傳參)
this.$router.push('/路徑/參數值')this.$router.push({path: '/路徑/參數值'
})
  • name 命名路由跳轉傳參(query傳參)
this.$router.push({name: '路由名字',query: {參數名1: '參數值1',參數名2: '參數值2'}
})
  • name 命名路由跳轉傳參 (動態路由傳參)
this.$router.push({name: '路由名字',params: {參數名: '參數值'}
})

Home.vue

<template><div class="home"><div class="logo-box"></div><div class="search-box"><input v-model="inpValue" type="text"><button @click="goSearch">搜索一下</button></div><div class="hot-link">熱門搜索：<router-link to="/search/黑馬程序員">黑馬程序員</router-link><router-link to="/search/前端培訓">前端培訓</router-link><router-link to="/search/如何成為前端大牛">如何成為前端大牛</router-link></div></div>
</template><script>
export default {name: 'FindMusic',data () {return {inpValue: ''}},methods: {goSearch () {// 1. 通過路徑的方式跳轉// (1) this.$router.push('路由路徑') [簡寫]//     this.$router.push('路由路徑?參數名=參數值')// this.$router.push('/search')// this.$router.push(`/search?key=${this.inpValue}`)// this.$router.push(`/search/${this.inpValue}`)// (2) this.$router.push({     [完整寫法] 更適合傳參//         path: '路由路徑'//         query: {//            參數名: 參數值,//            參數名: 參數值//         }//     })// this.$router.push({//   path: '/search',//   query: {//     key: this.inpValue//   }// })// this.$router.push({//   path: `/search/${this.inpValue}`// })// 2. 通過命名路由的方式跳轉 (需要給路由起名字) 適合長路徑//    this.$router.push({//        name: '路由名'//        query: { 參數名: 參數值 },//        params: { 參數名: 參數值 }//    })this.$router.push({name: 'search',// query: {//   key: this.inpValue// }params: {words: this.inpValue}})}}
}
</script>

組件緩存 keep-alive

問題：從面經 點到 詳情頁，又點返回，數據重新加載了 → 希望回到原來的位置

原因：路由跳轉后，組件被銷毀了，返回回來組件又被重建了，所以數據重新被加載了

解決：利用 keep-alive 將組件緩存下來

keep-alive 是什么

  • keep-alive 是 Vue 的內置組件，當它包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。
  • keep-alive 是一個抽象組件：它自身不會渲染成一個 DOM 元素，也不會出現在父組件鏈中。

keep-alive 的優點

  • 在組件切換過程中 把切換出去的組件保留在內存中，防止重復渲染 DOM，
  • 減少加載時間及性能消耗，提高用戶體驗性。
<template><div class="h5-wrapper"><keep-alive><router-view></router-view></keep-alive></div>
</template>

keep-alive 的三個屬性

  • include ： 組件名數組，只有匹配的組件會被緩存
  • exclude ： 組件名數組，任何匹配的組件都不會被緩存
  • max ： 最多可以緩存多少組件實例
<template><div class="h5-wrapper" :include="['LayoutPage']"><keep-alive ><router-view></router-view></keep-alive></div>
</template>

keep-alive 的使用會觸發兩個生命周期函數

  • activated 當組件**被激活（使用）**的時候觸發 → 進入這個頁面的時候觸發
  • deactivated 當組件不被使用的時候觸發 → 離開這個頁面的時候觸發

組件緩存后就不會執行組件的created, mounted, destroyed 等鉤子了

所以其提供了 actived 和 deactived 鉤子，幫我們實現業務需求

activated () {console.log('actived 激活 → 進入頁面');
},
deactivated() {console.log('deactived 失活 → 離開頁面');
}

自定義創建項目

目標：基于 VueCli 自定義創建項目架子

的三個屬性

  • include ： 組件名數組，只有匹配的組件會被緩存
  • exclude ： 組件名數組，任何匹配的組件都不會被緩存
  • max ： 最多可以緩存多少組件實例
<template><div class="h5-wrapper" :include="['LayoutPage']"><keep-alive ><router-view></router-view></keep-alive></div>
</template>

keep-alive 的使用會觸發兩個生命周期函數

  • activated 當組件**被激活（使用）**的時候觸發 → 進入這個頁面的時候觸發
  • deactivated 當組件不被使用的時候觸發 → 離開這個頁面的時候觸發

組件緩存后就不會執行組件的created, mounted, destroyed 等鉤子了

所以其提供了 actived 和 deactived 鉤子，幫我們實現業務需求

activated () {console.log('actived 激活 → 進入頁面');
},
deactivated() {console.log('deactived 失活 → 離開頁面');
}

自定義創建項目

目標：基于 VueCli 自定義創建項目架子
在這里插入圖片描述

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/pingmian/84266.shtml
繁體地址，請注明出處：http://hk.pswp.cn/pingmian/84266.shtml
英文地址，請注明出處：http://en.pswp.cn/pingmian/84266.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Hadoop復習（九）

Hadoop復習（九）

Azkaban工作流管理器 選擇 問題 1 判斷題 2 / 2 分 工作流是指具有依賴的一組job任務&#xff0c;被依賴的job任務最后執行 正確 錯誤 問題 2 判斷題 2 / 2 分 Azkaban兼容任何版本的Hadoop 正確 錯誤 問題 3 判斷題 2 / 2 分 獨立服務器模式下&#xff0c;Azkab…
閱讀更多...
SpringMVC相關知識(二)

SpringMVC相關知識(二)

一.重定向和轉發 1.ModelandView 設置ModelAndView對象 , 根據view的名稱 , 和視圖解析器跳到指定的頁面 頁面 : {視圖解析器前綴} viewName {視圖解析器后綴} 相關代碼&#xff1a; <!-- 視圖解析器 --> <bean class"org.springframework.web.servlet.vi…
閱讀更多...
std::ratio 簡單使用舉例

std::ratio 簡單使用舉例

author: hjjdebug date: 2025年 06月 09日 星期一 14:28:40 CST descrip: std::ratio 簡單使用舉例 文章目錄 1. 先看一個簡單的例子 1/2/1/35/62 std::ratio 的手冊頁3. std::ratio_add 到底是什么呢&#xff1f;4. 代碼注釋5. 加深理解.6. 自定義的std::ratio 與 std::ratio_…
閱讀更多...
Docker 優勢與缺點全面解析：容器技術的利與弊

Docker 優勢與缺點全面解析：容器技術的利與弊

在當今云計算、微服務、DevOps盛行的時代&#xff0c;Docker 幾乎成了開發者、運維工程師的標配工具之一。自2013年誕生以來&#xff0c;Docker 以其輕量、快速、易移植的特點&#xff0c;徹底改變了應用的構建、交付與部署方式。 但任何技術都有兩面性&#xff0c;Docker 也不…
閱讀更多...
大語言模型（LLM）中的KV緩存壓縮與動態稀疏注意力機制設計

大語言模型（LLM）中的KV緩存壓縮與動態稀疏注意力機制設計

隨著大語言模型&#xff08;LLM&#xff09;參數規模的增長&#xff0c;推理階段的內存占用和計算復雜度成為核心挑戰。傳統注意力機制的計算復雜度隨序列長度呈二次方增長&#xff0c;而KV緩存的內存消耗可能高達數十GB&#xff08;例如Llama2-7B處理100K token時需50GB內存&a…
閱讀更多...
排序算法總結（C++）

排序算法總結（C++）

目錄 一、穩定性二、排序算法選擇、冒泡、插入排序歸并排序隨機快速排序堆排序基數排序計數排序 三、總結 一、穩定性 排序算法的穩定性是指&#xff1a;同樣大小的樣本 **&#xff08;同樣大小的數據&#xff09;**在排序之后不會改變原始的相對次序。 穩定性對基礎類型對象…
閱讀更多...
使用Redis作為緩存優化ElasticSearch讀寫性能

使用Redis作為緩存優化ElasticSearch讀寫性能

在現代數據密集型應用中，ElasticSearch憑借其強大的全文搜索能力成為許多系統的首選搜索引擎。然而，隨著數據量和查詢量的增長，ElasticSearch的讀寫性能可能會成為瓶頸。本文將詳細介紹如何使用Redis作為緩存層來顯著提升ElasticSearch的讀寫性能，包括完整的架構設計、詳細…
閱讀更多...
獲取wordpress某個欄目的內容數量

獲取wordpress某個欄目的內容數量

獲取wordpress某個欄目的內容數量 <?php // 將以下 8 改成你的分類 ID 即可echo get_category(8)->count;?> 在制作wordpress模板時&#xff0c;有時會需要調用某個分類目錄下的所有內容數量&#xff0c;通過這段簡潔的代碼就可以實現。 給WordPress自定義字段加…
閱讀更多...
uniapp 安卓 APP 后臺持續運行（保活）的嘗試辦法

uniapp 安卓 APP 后臺持續運行（保活）的嘗試辦法

在移動應用開發領域&#xff0c;安卓系統的后臺管理機制較為復雜&#xff0c;應用在后臺容易被系統回收&#xff0c;導致無法持續運行。對于使用 Uniapp 開發的安卓 APP 來說&#xff0c;實現后臺持續運行&#xff08;保活&#xff09;是很多開發者面臨的重要需求&#xff0c;比…
閱讀更多...
深度學習——知識提煉

深度學習——知識提煉

第一部分&#xff1a;引言與背景——為什么需要知識提煉&#xff1f; 一、模型壓縮的背景 隨著深度學習的發展&#xff0c;模型變得越來越大&#xff08;如 ResNet152、BERT、ViT、GPT 等&#xff09;&#xff0c;其參數量動輒數億甚至上百億。這些大模型雖然性能強大&#x…
閱讀更多...
開源之夏·西安電子科技大學站精彩回顧：OpenTiny開源技術下沉校園，點燃高校開發者技術熱情

開源之夏·西安電子科技大學站精彩回顧：OpenTiny開源技術下沉校園，點燃高校開發者技術熱情

開源之夏2025編程活動正在如火如荼的進行中&#xff0c;當前也迎來了報名的倒計時階段&#xff0c;開源之夏組織方也通過高校行系列活動進入各大高校&#xff0c;幫助高校開發者科普開源文化、開源活動、開源技術。 6月4日 開源之夏攜手多位開源技術大咖、經驗型選手走進西安電…
閱讀更多...
時間復雜度和算法選擇

時間復雜度和算法選擇

數據范圍 時間復雜度 算法選擇 n \leq 30 指數級別 O(2^n) 深度優先搜索&#xff08;DFS&#xff09; 剪枝、狀態壓縮動態規劃 n \leq 100 O(n^3) Floyd 算法、動態規劃、高斯消元 n \leq 1000 O(n^2) 、 O(n^2 \log n) 動態規劃、二分…
閱讀更多...
數據分析實戰2（Tableau）

數據分析實戰2（Tableau）

1、Tableau功能 數據賦能&#xff08;讓業務一線也可以輕松使用最新數據&#xff09; 分析師可以直接將數據看板發布到線上自動更新看板自由下載數據線上修改圖表郵箱發送數據設置數據預警 數據探索&#xff08;通過統計分析和數據可視化&#xff0c;從數據發現問題&#xf…
閱讀更多...
CentOS7_Linux下安裝Docker和docker-compose

CentOS7_Linux下安裝Docker和docker-compose

目錄 環境要求安裝步驟1、修改鏡像源配置文件2、卸載舊版本 Docker&#xff08;如有&#xff09;3、安裝依賴工具4、添加 Docker 官方倉庫5、安裝 Docker 引擎6、啟動 Docker 并設置開機自啟7、驗證安裝8、配置鏡像加速器創建配置文件重啟 Docker 生效 9、允許非 root 用戶操作…
閱讀更多...
ubuntu中使用docker

ubuntu中使用docker

上一篇我已經下載了一個ubuntu:20.04的鏡像&#xff1b; 1. 查看所有鏡像 sudo docker images 2. 基于本地存在的ubuntu:20.04鏡像創建一個容器&#xff0c;容器的名為cppubuntu-1。創建的時候就會啟動容器。 sudo docker run -itd --name cppubuntu-1 ubuntu:20.04 結果出…
閱讀更多...
均衡后的SNRSINR

均衡后的SNRSINR

本文主要摘自參考文獻中的前兩篇&#xff0c;相關文獻中經常會出現MIMO檢測后的SINR不過一直沒有找到相關數學推到過程&#xff0c;其中文獻[1]中給出了相關原理在此僅做記錄。 1. 系統模型 復信道模型 n t n_t nt? 根發送天線&#xff0c; n r n_r nr? 根接收天線的 MIMO 系…
閱讀更多...
佰力博科技與您探討熱釋電測量的幾種方法

佰力博科技與您探討熱釋電測量的幾種方法

熱釋電的測量主要涉及熱釋電系數的測定&#xff0c;這是表征熱釋電材料性能的重要參數。熱釋電系數的測量方法主要包括靜態法、動態法和積分電荷法。其中&#xff0c;積分電荷法最為常用&#xff0c;其原理是通過測量在電容器上積累的熱釋電電荷&#xff0c;從而確定熱釋電系數…
閱讀更多...
idea中 maven 本地倉庫有jar包，但還是找不到，解決打包失敗和無法引用的問題

idea中 maven 本地倉庫有jar包，但還是找不到，解決打包失敗和無法引用的問題

1、刪除本地倉庫中的文件 進入本地倉庫對應jar包文件目錄中刪除_remote.repositories文件和結尾為.lastUpdated的文件 2、回到IDEA刷新Maven 3、查看之前引用不了的jar是否引入成功
閱讀更多...
ALOHA ACT算法與源碼筆記

ALOHA ACT算法與源碼筆記

算法 一文通透動作分塊算法ACT&#xff1a;斯坦福ALOHA團隊推出的動作序列預測算法(Action Chunking with Transformers) 比較簡單&#xff0c;算法題目里就寫了&#xff1a;Action Chunking with Transformers&#xff0c;比較有特色的地方就是Action Chunking&#xff0c;核…
閱讀更多...
數字ic后端設計從入門到精通6（含fusion compiler, tcl教學）repeater詳解

數字ic后端設計從入門到精通6（含fusion compiler, tcl教學）repeater詳解

Repeaters RC延遲與導線長度的關系&#xff1a; 導線的電阻&#xff08;R&#xff09;和電容&#xff08;C&#xff09;都會隨著導線長度&#xff08;l&#xff09;的增加而增大。RC延遲是電阻和電容共同作用導致的信號延遲。由于RC延遲與R和C的乘積有關&#xff0c;因此它會隨…
閱讀更多...
最新文章

Copyright @ 2022~2023