【Vue2手錄13】路由Vue Router

一、Vue Router 基礎概念與核心原理

1.1 路由本質與核心要素

  • 本質定義：路由是URL路徑與頁面組件的對應關系，通過路徑變化控制視圖切換，實現單頁應用（SPA）的無刷新頁面切換。
  • 核心三要素：
    1. router-link：聲明式導航組件，替代原生<a>標簽（避免頁面刷新），通過to屬性指定目標路徑。
    2. router-view：路由視圖出口，匹配路徑的組件會渲染到該標簽位置（路由有幾級嵌套，就需要幾個router-view）。
    3. 路由實例：通過new VueRouter()創建，配置路徑與組件的映射規則（routes數組）。

1.2 路由模式對比（hash vs history）

路由模式決定URL的表現形式和底層實現邏輯，是面試高頻考點，需重點區分：

對比維度hash模式（默認）history模式（推薦）
URL表現帶#號（如http://localhost:8080/#/home）無#號（如http://localhost:8080/home）
實現原理基于window.onhashchange事件監聽#后路徑變化基于HTML5 History API（pushState/popState）
后端依賴純前端實現，#后路徑不發送到后端，無需配置路徑會完整發送到后端，刷新可能觸發404
404問題解決無此問題需后端配置（如Nginx）：未匹配路徑返回index.html
適用場景簡單Demo、無需美觀URL的項目生產環境、對URL美觀度和SEO有要求的項目
后端Nginx配置示例（解決history模式404）
location / {root   /usr/share/nginx/html; # 項目打包后的目錄index  index.html index.htm;try_files $uri $uri/ /index.html; # 核心配置：未匹配路徑返回index.html
}

1.3 路由注冊機制

  • Vue.use(VueRouter)的必要性：
    Vue Router是Vue生態專屬插件，需通過Vue.use()顯式注冊，否則路由功能無法生效（類比“插座與插頭”，必須配套使用）。
    注意：通用工具庫（如Axios）無需此步驟，僅Vue專屬插件（Vue Router、Vuex）需注冊。
  • 注冊原理：Vue.use()會調用插件內部的install方法，將路由實例注入Vue全局，使所有組件可通過this.$router訪問路由實例。

二、路由核心配置流程（Vue 2 + Vue Router 3.x）

路由配置需遵循“模塊化”原則，避免與main.js混雜，標準流程如下：

2.1 標準配置步驟（五步走）

步驟1：創建路由目錄與文件

在src下新建router文件夾，創建index.js（路由配置主文件，Webpack默認優先查找index.js）。

步驟2：引入依賴并注冊插件
// src/router/index.js
import Vue from 'vue' // 引入Vue核心
import VueRouter from 'vue-router' // 引入Vue Router
Vue.use(VueRouter) // 注冊路由插件（必須步驟）
步驟3：定義路由規則（routes數組）

routes是路由配置的核心，每個路由對象包含path（路徑）、component（對應組件）等屬性：

// 1. 引入組件（支持懶加載，優化首屏性能）
const Home = () => import('@/views/Home.vue') // 懶加載寫法
const About = () => import('@/views/About.vue')
const User = () => import('@/views/User.vue')// 2. 定義路由規則
const routes = [{path: '/', // 默認路徑redirect: '/home' // 重定向到首頁（避免空白頁面）},{path: '/home',name: 'Home', // 路由名稱（可選，用于命名路由跳轉）component: Home},{path: '/about',name: 'About',component: About},{path: '/user/:id', // 動態路由：:id為動態參數name: 'User',component: User}
]
步驟4：創建路由實例并導出
const router = new VueRouter({mode: 'history', // 路由模式：hash/history（默認hash）routes // 注入路由規則（ES6簡寫，等同于routes: routes）
})export default router // 導出路由實例，供main.js引入
步驟5：注入根實例并添加router-view
  1. 在main.js中引入路由實例：
// src/main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router' // 引入路由實例（自動找router/index.js）new Vue({router, // 注入路由實例（使所有組件可訪問$router/$route）render: h => h(App)
}).$mount('#app')
  1. 在App.vue中添加router-view（指定組件渲染位置）：
<!-- src/App.vue -->
<template><div id="app"><!-- 1. 路由導航 --><nav><router-link to="/home">首頁</router-link><router-link to="/about">關于我們</router-link></nav><!-- 2. 路由視圖出口：匹配的組件會渲染到這里 --><router-view></router-view></div>
</template>

2.2 routes數組核心屬性詳解

屬性作用與說明示例
path路由路徑（必須以/開頭，子路由可省略/自動拼接父路徑）/home（一級路由）、child（子路由）
component路徑對應的組件（支持懶加載() => import()和直接引入）Home、() => import('@/views/Home.vue')
name路由名稱（唯一，用于命名路由跳轉，解耦路徑變化）name: 'Home'
children子路由配置數組（實現嵌套路由，每個子路由結構與父路由一致）children: [{ path: 'child', component: Child }]
redirect重定向（訪問當前路徑時自動跳轉到目標路徑，支持字符串/name對象）redirect: '/home'、redirect: { name: 'Home' }
alias路由別名（給路由多個訪問路徑，地址欄顯示別名，組件不變）alias: '/index'（訪問/index等同于/home）

三、路由進階特性（實戰必備）

3.1 嵌套路由（多級路由）

嵌套路由用于實現“父組件包含子組件”的層級結構（如后臺管理系統的“側邊欄+內容區”），核心是children配置和多級router-view。

1. 配置示例（后臺管理系統）
// src/router/index.js
const Layout = () => import('@/views/Layout.vue') // 父布局組件
const Dashboard = () => import('@/views/Dashboard.vue') // 子組件1
const Settings = () => import('@/views/Settings.vue') // 子組件2const routes = [{path: '/admin',name: 'Layout',component: Layout,// 子路由配置：path不加/，自動拼接父路徑（/admin/dashboard）children: [{path: '', // 子路由默認路徑（訪問/admin時渲染Dashboard）component: Dashboard},{path: 'settings', // 子路由路徑：完整路徑為/admin/settingsname: 'Settings',component: Settings}]}
]
2. 父組件（Layout.vue）添加子路由視圖
<!-- src/views/Layout.vue -->
<template><div class="layout"><!-- 側邊欄（固定父組件內容） --><aside><router-link :to="{ name: 'Dashboard' }">數據看板</router-link><router-link :to="{ name: 'Settings' }">系統設置</router-link></aside><!-- 子路由視圖出口：子組件（Dashboard/Settings）渲染到這里 --><main><router-view></router-view></main></div>
</template>
關鍵注意點
  • 子路由path不加/：自動拼接父路由路徑（如settings → /admin/settings）；加/則為絕對路徑（需寫完整路徑，如/admin/settings）。
  • 每級路由需對應router-view：父路由組件放父級router-view，子路由組件放子級router-view（路由有幾級，就需要幾個router-view）。

3.2 動態路由（路徑參數）

動態路由用于“多個路徑對應同一個組件”的場景（如用戶詳情頁/user/1、/user/2均渲染User組件），核心是通過:聲明動態參數。

1. 配置示例（用戶詳情頁）
// src/router/index.js
const User = () => import('@/views/User.vue')const routes = [{// :id為動態參數，可自定義名稱（如:userId）path: '/user/:id', name: 'User',component: User,// 可選：通過props將params參數注入組件（避免在組件中寫$route.params）props: true }
]
2. 組件中獲取動態參數
<!-- src/views/User.vue -->
<template><div><!-- 方式1：直接通過$route.params獲取 --><h1>用戶ID：{{ $route.params.id }}</h1><!-- 方式2：通過props接收（需路由配置props: true） --><h1>用戶ID（props）：{{ id }}</h1></div>
</template>
<script>
export default {name: 'User',props: ['id'], // 接收路由注入的params參數// 監聽參數變化（組件復用場景，如從/user/1跳轉到/user/2）watch: {$route(to, from) {console.log('用戶ID變化：', to.params.id)}}
}
</script>
3. 動態路由跳轉方式
跳轉方式代碼示例說明
路徑字符串this.$router.push('/user/123')簡單直接，適合固定路徑
path對象this.$router.push({ path: '/user/123' })路徑需完整拼接，不支持單獨傳params
name+paramsthis.$router.push({ name: 'User', params: { id: 123 } })推薦：解耦路徑，params自動拼接路徑

3.3 查詢參數（query）

查詢參數用于“非路徑必需的臨時數據傳遞”（如列表篩選、分頁），格式為URL?key=value&key2=value2，無需預配置路由。

1. 跳轉與參數獲取示例
<!-- 跳轉組件（如Home.vue） -->
<template><button @click="goProductList">查看商品列表</button>
</template>
<script>
export default {methods: {goProductList() {// 方式1：path對象+querythis.$router.push({path: '/product',query: { category: 'phone', page: 1 } // 查詢參數})// 方式2：name對象+query（推薦，解耦路徑）// this.$router.push({//   name: 'Product',//   query: { category: 'phone', page: 1 }// })}}
}
</script>
<!-- 目標組件（Product.vue）獲取參數 -->
<template><div><h1>篩選分類：{{ $route.query.category }}</h1><h1>當前頁碼：{{ $route.query.page }}</h1></div>
</template>
2. 動態路由 vs 查詢參數（核心區別）
對比維度動態路由（params）查詢參數（query）
路徑表現是路徑的一部分（/user/123）附加在URL后（/product?category=phone）
路由配置需預定義動態參數（/user/:id）無需預配置
參數必要性必選（不傳遞參數會導致路由匹配失敗）可選（不傳遞也能匹配路由）
數據用途標識資源（如用戶ID、商品ID）篩選、排序、分頁等臨時數據
參數獲取$route.params$route.query

3.4 通配符與404頁面

通配符*用于匹配所有未明確定義的路由，常用來實現404頁面（提升用戶體驗，替代空白頁面）。

1. 配置示例
// src/router/index.js
const NotFound = () => import('@/views/NotFound.vue') // 404組件const routes = [// 其他路由配置...// 通配符路由：必須放在最后（確保優先匹配明確路由）{path: '*',component: NotFound}
]
2. 404組件示例（NotFound.vue）
<template><div class="not-found"><h1>404 - 頁面走丟了！</h1><p>您訪問的路徑：{{ $route.params.pathMatch }}</p> <!-- 獲取無效路徑 --><router-link to="/home">返回首頁</router-link></div>
</template>
<style scoped>
.not-found {text-align: center;margin-top: 50px;color: #666;
}
</style>
關鍵注意點
  • 通配符位置：必須放在路由配置最后（舊版Vue Router 3.x嚴格要求，新版雖優化，但保持習慣可兼容）。
  • pathMatch參數：通配符匹配時，$route.params.pathMatch會自動包含用戶訪問的無效路徑，可用于頁面提示。

3.5 重定向與別名

1. 重定向（redirect）

重定向是“訪問A路徑時自動跳轉到B路徑”，地址欄會顯示B路徑的URL，適合舊路徑兼容、默認頁面跳轉。

重定向方式代碼示例適用場景
字符串路徑redirect: '/home'簡單固定跳轉
name對象redirect: { name: 'Home' }依賴路由名稱，路徑變化無需修改
動態函數redirect: to => '/home'復雜邏輯（如根據參數動態跳轉）
2. 別名（alias）

別名是“給路由多個訪問路徑”，訪問別名路徑時，組件不變且地址欄顯示別名，適合隱藏真實路由結構、兼容舊URL。

const routes = [{path: '/home',name: 'Home',component: Home,alias: '/index' // 訪問/index等同于訪問/home，地址欄顯示/index}
]
重定向 vs 別名（核心區別）
  • 重定向：URL會變化（A→B），本質是“跳轉”；
  • 別名：URL不變（訪問別名路徑），本質是“同一資源的多個入口”。

四、補充重點知識（性能與實戰技巧）

4.1 路由懶加載（性能優化）

路由懶加載通過“按需加載組件”減少首屏加載時間，核心是component: () => import('組件路徑')語法（Webpack動態導入）。

1. 配置示例
// 懶加載寫法（推薦）
const Home = () => import('@/views/Home.vue')
// 對比：普通導入（首屏會加載所有組件，性能差）
// import Home from '@/views/Home.vue'const routes = [{ path: '/home', component: Home }
]
2. 優勢
  • 首屏加載體積減小：僅加載當前路徑的組件，而非所有組件；
  • 提升首屏渲染速度：避免因組件過多導致的白屏時間過長。

4.2 路徑別名@的使用

@是Webpack默認配置的路徑別名，代表src目錄，可避免復雜的相對路徑（如../../views/Home.vue）。

1. 使用示例
// 普通相對路徑（繁瑣，易出錯）
import Home from '../../views/Home.vue'
// @別名路徑（簡潔，項目結構變化無需修改）
import Home from '@/views/Home.vue'
2. 原理

Webpack配置中通過resolve.alias定義：

// webpack.config.js（Vue CLI項目無需手動配置）
module.exports = {resolve: {alias: {'@': path.resolve(__dirname, 'src') // @指向src目錄}}
}

4.3 路由守衛基礎（權限控制）

路由守衛用于“路由跳轉前/后攔截”，常實現登錄驗證、權限判斷等功能，核心介紹全局前置守衛beforeEach。

登錄驗證示例
// src/router/index.js
router.beforeEach((to, from, next) => {// 1. 不需要登錄的頁面（如首頁、登錄頁）直接放行const whiteList = ['/home', '/login']if (whiteList.includes(to.path)) {return next()}// 2. 需要登錄：判斷是否有tokenconst token = localStorage.getItem('token')if (token) {next() // 有token，放行} else {next('/login') // 無token，跳轉到登錄頁}
})
  • to：即將進入的目標路由對象；
  • from：當前離開的路由對象；
  • next：必須調用的函數，控制是否放行（next()放行，next('/login')跳轉到指定路徑）。

五、知識小結

知識點核心內容考試重點/易混淆點難度系數
路由模式hash（帶#，純前端）、history（無#，需后端配置）history模式404問題與Nginx配置???
嵌套路由children配置子路由，多級router-view對應層級子路由路徑加不加/的區別；router-view數量與路由層級匹配???
動態路由:param聲明參數，$route.params獲取，組件復用需監聽$route動態路由跳轉的三種方式；props: true注入參數的用法????
查詢參數URL?key=value，$route.query獲取，無需預配置路由與動態路由的區別（必選vs可選、路徑部分vs附加部分）???
通配符與404*匹配所有路徑，必須放路由最后，pathMatch獲取無效路徑通配符位置的影響；404頁面的用戶體驗設計??
重定向與別名重定向（URL變化）、別名（URL不變）兩者的本質區別；別名的實際應用場景??
路由懶加載component: () => import()按需加載，優化首屏性能與普通導入的區別；懶加載對打包體積的影響???
路由守衛beforeEach全局攔截，實現登錄驗證、權限控制next()函數的必選性；白名單的設計思路????

六、實戰小練習

6.1 題目

  1. 動態路由實戰：實現“商品詳情頁”，要求：
    • 配置動態路由/product/:productId，對應ProductDetail組件；
    • 在Home組件中通過router-link和編程式導航兩種方式跳轉到詳情頁（傳遞productId=1001）；
    • 在ProductDetail組件中顯示商品ID，并監聽ID變化（從1001跳轉到1002時打印新ID）。
  2. 查詢參數實戰：實現“商品列表篩選”，要求：
    • 配置路由/product-list，對應ProductList組件；
    • 在Home組件中跳轉時傳遞查詢參數category=phone&sort=price；
    • 在ProductList組件中顯示篩選分類和排序方式，并支持通過按鈕切換排序（sort=price→sort=sales）。
  3. 404與重定向實戰：
    • 創建NotFound組件，配置通配符路由實現404頁面；
    • 配置重定向：訪問/時跳轉到/home，訪問/old-home時跳轉到/home（通過name對象）。
  4. 嵌套路由實戰：實現“個人中心”嵌套結構，要求：
    • 父路由/profile對應ProfileLayout組件（包含“基本信息”“我的訂單”導航）；
    • 子路由/profile/basic對應ProfileBasic組件，/profile/orders對應ProfileOrders組件；
    • 訪問/profile時默認顯示ProfileBasic組件。

6.2 參考答案

1. 動態路由實戰
（1）路由配置（src/router/index.js）
const Home = () => import('@/views/Home.vue')
const ProductDetail = () => import('@/views/ProductDetail.vue')const routes = [{ path: '/home', name: 'Home', component: Home },{ path: '/product/:productId', name: 'ProductDetail', component: ProductDetail,props: true // 注入productId到props}
]
（2）跳轉組件（Home.vue）
<template><div><h1>首頁</h1><!-- 方式1：router-link跳轉 --><router-link :to="{ name: 'ProductDetail', params: { productId: 1001 } }">查看商品1001（router-link）</router-link><!-- 方式2：編程式導航 --><button @click="goToProduct(1001)">查看商品1001（編程式）</button></div>
</template>
<script>
export default {methods: {goToProduct(id) {this.$router.push({ name: 'ProductDetail', params: { productId: id } })}}
}
</script>
（3）詳情組件（ProductDetail.vue）
<template><div><h1>商品詳情頁</h1><p>商品ID：{{ productId }}</p><button @click="goToNextProduct">切換到商品1002</button></div>
</template>
<script>
export default {name: 'ProductDetail',props: ['productId'], // 接收路由注入的參數methods: {goToNextProduct() {this.$router.push({ name: 'ProductDetail', params: { productId: 1002 } })}},// 監聽參數變化watch: {productId(newId, oldId) {console.log(`商品ID從${oldId}變為${newId}`)}}
}
</script>
2. 查詢參數實戰
（1）路由配置（src/router/index.js）
const ProductList = () => import('@/views/ProductList.vue')const routes = [{ path: '/product-list', name: 'ProductList', component: ProductList }
]
（2）跳轉組件（Home.vue）
<template><button @click="goToProductList">查看手機商品列表</button>
</template>
<script>
export default {methods: {goToProductList() {this.$router.push({name: 'ProductList',query: { category: 'phone', sort: 'price' }})}}
}
</script>
（3）列表組件（ProductList.vue）
<template><div><h1>商品列表</h1><p>篩選分類：{{ $route.query.category }}</p><p>排序方式：{{ $route.query.sort }}</p><button @click="changeSort">切換排序為“銷量”</button></div>
</template>
<script>
export default {methods: {changeSort() {// 保留當前category參數，僅修改sortthis.$router.push({name: 'ProductList',query: { ...this.$route.query, sort: 'sales' }})}}
}
</script>
3. 404與重定向實戰
（1）404組件（NotFound.vue）
<template><div style="text-align: center; margin-top: 50px;"><h1 style="color: #f44336;">404 - 頁面不存在</h1><p>您訪問的路徑：{{ $route.params.pathMatch }}</p><router-link to="/home" style="color: #2196f3;">返回首頁</router-link></div>
</template>
（2）路由配置（src/router/index.js）
const NotFound = () => import('@/views/NotFound.vue')const routes = [// 重定向：/ → /home，/old-home → /home{ path: '/', redirect: '/home' },{ path: '/old-home', redirect: { name: 'Home' } },{ path: '/home', name: 'Home', component: Home },// 通配符路由放最后{ path: '*', component: NotFound }
]
4. 嵌套路由實戰
（1）路由配置（src/router/index.js）
const ProfileLayout = () => import('@/views/ProfileLayout.vue')
const ProfileBasic = () => import('@/views/ProfileBasic.vue')
const ProfileOrders = () => import('@/views/ProfileOrders.vue')const routes = [{path: '/profile',name: 'ProfileLayout',component: ProfileLayout,children: [{ path: '', component: ProfileBasic }, // 默認顯示基本信息{ path: 'basic', name: 'ProfileBasic', component: ProfileBasic },{ path: 'orders', name: 'ProfileOrders', component: ProfileOrders }]}
]
（2）父布局組件（ProfileLayout.vue）
<template><div class="profile-layout"><!-- 側邊導航 --><aside><router-link :to="{ name: 'ProfileBasic' }">基本信息</router-link><router-link :to="{ name: 'ProfileOrders' }">我的訂單</router-link></aside><!-- 子路由視圖出口 --><main><router-view></router-view></main></div>
</template>
<style scoped>
.profile-layout {display: flex;
}
aside {width: 200px;border-right: 1px solid #eee;padding: 20px;
}
aside router-link {display: block;margin: 10px 0;text-decoration: none;
}
main {flex: 1;padding: 20px;
}
</style>
（3）子組件（ProfileBasic.vue示例）
<template><div><h2>基本信息</h2><p>用戶名：張三</p><p>手機號：138****1234</p></div>
</template>

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

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

相關文章

【Git】零基礎入門：配置與初始操作實戰指南

【Git】零基礎入門：配置與初始操作實戰指南

目錄 1.前言 插播一條消息~ 2.正文 2.1概念 2.2安裝與配置 2.3基礎操作 2.3.1創建本地倉庫 2.3.2配置Git 2.3.3認識工作區&#xff0c;暫存區&#xff0c;版本庫 2.3.4版本回退 2.3.5撤銷修改 2.3.6刪除文件 3.小結 1.前言 在 Java 開發場景中&#xff0c;團隊協…
閱讀更多...
CAD多面體密堆積_圓柱體試件3D插件

CAD多面體密堆積_圓柱體試件3D插件

插件介紹 CAD多面體密堆積_圓柱體試件3D插件可在AutoCAD內基于重力堆積算法在圓柱體容器內進行多面體的密堆積三維建模。插件采取堆積可視化交互界面&#xff0c;可觀察多面體顆粒的堆積動態&#xff0c;并可采用鼠標進行多面體位置的局部微調。插件可設置重力堆積模擬時長參數…
閱讀更多...
機器學習-模型調參、超參數優化

機器學習-模型調參、超參數優化

模型調參 手工超參數微調 以一個好的baseline開始&#xff0c;即&#xff1a;在一些高質量的工具包中的默認設置&#xff0c;論文中的值調一個值&#xff0c;重新訓練這個模型來觀察變化重復很多次獲得對以下的insight&#xff1a; 1、哪個超參數重要 2、模型對超參數的敏感度是…
閱讀更多...
STM32 單片機開發 - I2C 總線

STM32 單片機開發 - I2C 總線

一、IIC(I2C) 線的作用UART總線 PC端(CPU) <----------> 開發板(STM32U575RIT6)IIC總線 主控芯片(STM32U575RIT6) <---------> 傳感器驅動芯片(SHT20/SI7006空氣溫濕度傳感器)二、I2C 總線的概念圖 1 I2C 總線示意圖圖 2 多主機多從機模式示意圖I2C 總…
閱讀更多...
Redis 數據結構源碼剖析（SDS、Dict、Skiplist、Quicklist、Ziplist）

Redis 數據結構源碼剖析（SDS、Dict、Skiplist、Quicklist、Ziplist）

Redis 數據結構源碼剖析&#xff08;SDS、Dict、Skiplist、Quicklist、Ziplist&#xff09;1. 前言 Redis 的高性能與豐富數據結構密切相關。 核心數據結構包括&#xff1a; SDS&#xff08;Simple Dynamic String&#xff09;&#xff1a;字符串底層實現。Dict&#xff08;哈希…
閱讀更多...
無人機圖傳系統的功能解析和技術實現原理

無人機圖傳系統的功能解析和技術實現原理

無人機圖傳系統要將機載攝像頭捕捉到的畫面以盡可能低的時延、盡可能高的清晰度、穩定可靠地送達地面操作員或指揮中心&#xff0c;進而驅動現場行動。為此&#xff0c;核心功能可以從四個維度來解構&#xff1a;實時性、畫質與穩定性、覆蓋與冗余、以及安全協同。實時性要求在…
閱讀更多...
微服務網關的bug

微服務網關的bug

從你提供的Eureka控制臺信息來看&#xff0c;SPRINGCLOUD-PRODUCT已成功注冊到Eureka&#xff0c;且狀態為UP&#xff08;實例地址localhost:springcloud-product:8082&#xff09;&#xff0c;排除了“服務未注冊”“實例離線”的基礎問題。但仍報“負載均衡無可用服務”&…
閱讀更多...
LeetCode:2.字母異位詞分組

LeetCode:2.字母異位詞分組

目錄 1.字母異位詞分組 1.字母異位詞分組 對于這道題來說&#xff0c;關鍵的地方在于字母異位詞他們排序后的字符串完全相等&#xff0c;所以我們可以通過哈希表來建設一個字符串和其排序相同的字符串數組的映射關系 class Solution { public:vector<vector<string>…
閱讀更多...
SwiftData3 一劍封喉：WWDC25 的“數據劍譜”精講，讓 Core Data 老俠原地退休

SwiftData3 一劍封喉：WWDC25 的“數據劍譜”精講，讓 Core Data 老俠原地退休

文章目錄每日一句正能量一、開場白&#xff1a;老兵的隱痛二、SwiftData3 新劍譜總覽三、亮劍&#xff1a;30 行代碼搭一個「跨端秒級同步」的收藏夾1. 鑄劍&#xff1a;聲明模型2. 開鋒&#xff1a;初始化容器3. 出招&#xff1a;SwiftUI7 直接綁四、進階劍氣&#xff1a;Char…
閱讀更多...
微服務-nacos服務中心

微服務-nacos服務中心

單體與微服務 單體架構&#xff1a;項目所有功能都在一個 war 包 /jar 包里&#xff0c;像商城的訂單、庫存、會員、支付等服務&#xff0c;都打包在一起&#xff0c;部署在 Tomcat 服務器&#xff0c;數據存在 MySQL。 優點&#xff1a;開發簡單&#xff0c;易于理解和維護&am…
閱讀更多...
嵌入式硬件——IMX6ULL 裸機LED點亮實驗

嵌入式硬件——IMX6ULL 裸機LED點亮實驗

一. 實驗準備 基于正點原子 IMX6ULL-Mini 開發板&#xff0c;實現 LED 周期性閃爍功能&#xff0c;需完成環境搭建與硬件原理確認兩大核心準備工作。 1.1 開發環境搭建 需在Windows和Ubuntu中安裝工具&#xff0c;確保文件傳輸、交叉編譯、代碼編輯功能正常。1.1.1 跨系統文件傳…
閱讀更多...
深度學習之PyTorch基本使用（一）

深度學習之PyTorch基本使用（一）

一、PyTorch簡介與安裝1.核心概念PyTorch 是一款 Python 深度學習框架&#xff0c;其核心是張量&#xff08;Tensor&#xff09; —— 元素為同一種數據類型的多維矩陣&#xff0c;以 “類” 的形式封裝&#xff0c;內置了張量運算、處理等方法&#xff0c;是深度學習中數據存儲…
閱讀更多...
SQLAlchemy -＞ Base.metadata.create_all(engine ）詳解

SQLAlchemy -＞ Base.metadata.create_all(engine ）詳解

目錄 一、核心作用 二、是否每次運行項目都會執行&#xff1f; 1. ??典型場景??&#xff08;推薦&#xff09; 2. ??需要避免的情況?? 三、最佳實踐建議 1. ??生產環境?? 2. ??開發/測試環境?? 四、常見問題解答 Q1: 如果表結構改了&#xff0c;creat…
閱讀更多...
C++異步任務處理與消息可靠性保障指南：從基礎到實戰

C++異步任務處理與消息可靠性保障指南：從基礎到實戰

在當今多核處理器普及的時代&#xff0c;程序性能和響應能力的提升成為開發者面臨的核心課題。無論是高頻交易系統的毫秒級響應需求、實時游戲引擎的流暢交互體驗&#xff0c;還是網絡服務器的高并發處理能力&#xff0c;異步編程都已成為突破性能瓶頸的關鍵技術[1]。作為高性能…
閱讀更多...
LazyForEach性能優化：解決長列表卡頓問題

LazyForEach性能優化：解決長列表卡頓問題

本文將深入解析HarmonyOS中LazyForEach的工作原理、性能優勢、實戰優化技巧及常見問題解決方案&#xff0c;幫助你構建流暢的長列表體驗。 1. LazyForEach 核心優勢與原理 LazyForEach 是鴻蒙ArkUI框架中為高性能列表渲染設計的核心組件&#xff0c;其核心設計思想基于動態加載…
閱讀更多...
Spring Boot 全棧優化：服務器、數據、緩存、日志的場景應用！

Spring Boot 全棧優化：服務器、數據、緩存、日志的場景應用！

Spring Boot以其“開箱即用”聞名&#xff0c;但默認配置往往在高并發場景下成為瓶頸&#xff1a;Tomcat線程堵塞、數據庫連接耗盡、緩存命中率低下、日志洪水般淹沒磁盤。想象一個電商微服務&#xff0c;峰值流量下響應遲鈍&#xff0c;用戶流失——這不是宿命&#xff0c;而是…
閱讀更多...
Leetcode sql 50 ~5

Leetcode sql 50 ~5

select product_idfrom Productswhere low_fats Y and recyclable Y;SQL 規定&#xff1a;null 的比較必須用 is null 或 is not null&#xff0c;不能用普通的等號&#xff08;&#xff09;。# Write your MySQL query statement below select name from Customer where ref…
閱讀更多...
C#高并發與并行理解處理

C#高并發與并行理解處理

目錄 1.什么是IO密集型任務/CPU密集型任務 2.高并發概念和技術實現 2.并行&#xff08;Parallelist&#xff09;概念和技術實現 4.核心區別對比 1.什么是IO密集型任務/CPU密集型任務 1.IO密集型任務&#xff1a; 定義&#xff1a;任務核心邏輯不依賴CPU計算&#xff0c;而是…
閱讀更多...
正點原子STM32F407 U盤升級程序（IAP）OTA Bootloader APP USB升級+FATFS+USB Host

正點原子STM32F407 U盤升級程序（IAP）OTA Bootloader APP USB升級+FATFS+USB Host

正點原子STM32F407 U盤升級程序&#xff08;IAP&#xff09;OTA Bootloader APP USB升級FATFSUSB HostChapter0 解決STM32 Bootloader跳轉APP失敗問題問題背景問題描述問題解決原APP跳轉的函數為&#xff1a;修改APP程序main入口處Chapter1 MDK如何生成*.bin格式的文件Chapter2…
閱讀更多...
MySQL 8.0 在 Ubuntu 22.04 中如何將啟用方式改為mysql_native_password（密碼認證）

MySQL 8.0 在 Ubuntu 22.04 中如何將啟用方式改為mysql_native_password（密碼認證）

MySQL 8.0 在 Ubuntu 22.04 中默認啟用了 auth_socket 認證方式（而非密碼認證），導致 mysql_secure_installation 跳過了 root 密碼設置。這會直接影響后續用 Navicat 連接 MySQL（因為 Navicat 需要密碼登錄），必須手動調整 root 用戶的認證方式并設置密碼。 核心問題：au…
閱讀更多...
最新文章

Copyright @ 2022~2023