欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue實(shí)現(xiàn)路由跳轉(zhuǎn)的多種方式匯總

 更新時(shí)間：2025年07月07日 09:04:05   作者：江城開朗的豌豆  
Vue路由可以幫助你在單頁(yè)應(yīng)用中管理應(yīng)用的不同頁(yè)面和頁(yè)面間的跳轉(zhuǎn),通過Vue路由,你可以實(shí)現(xiàn)頁(yè)面的動(dòng)態(tài)切換和無刷新加載,提升用戶體驗(yàn)和頁(yè)面性能,今天就來分享下Vue中實(shí)現(xiàn)路由跳轉(zhuǎn)的多種方式,總有一種適合你

今天咱們不聊人生理想，就聊聊Vue里那些讓人又愛又恨的路由跳轉(zhuǎn)方式。保證看完這篇，你再也不會(huì)在路由跳轉(zhuǎn)上栽跟頭！

一、路由跳轉(zhuǎn)的"基本款"

1. 聲明式導(dǎo)航 - 優(yōu)雅的模板寫法

<router-link to="/home">回家</router-link>
<router-link :to="{ path: '/profile' }">我的主頁(yè)</router-link>

我的個(gè)人心得：

  • 就像穿衣服，這種寫法最"體面"
  • 會(huì)自動(dòng)渲染成<a>標(biāo)簽，SEO友好
  • 支持active-class高亮，做導(dǎo)航菜單 特別香

2. 編程式導(dǎo)航 - 靈活的JS操作

// 基本跳轉(zhuǎn)
this.$router.push('/home')

// 帶參數(shù)跳轉(zhuǎn)
this.$router.push({ path: '/user', query: { id: '123' } })

// 命名路由跳轉(zhuǎn)
this.$router.push({ name: 'user', params: { username: '我' } })

我踩過的坑提醒：

// params傳參必須用name，不能用path！
this.$router.push({ 
  name: 'user', 
  params: { userId: '007' } // ? 正確
})

this.$router.push({
  path: '/user',
  params: { userId: '007' } // ? 無效！
})

二、進(jìn)階跳轉(zhuǎn)技巧

1. 替換當(dāng)前路由（不留下歷史記錄）

this.$router.replace('/login')
// 相當(dāng)于把當(dāng)前路由"覆蓋"掉

適用場(chǎng)景：

  • 登錄后跳轉(zhuǎn)，不讓用戶點(diǎn)返回又回到登錄頁(yè)
  • 表單分步驟提交，不需要回退到上一步

2. 前進(jìn)后退控制

// 后退一步
this.$router.go(-1)

// 前進(jìn)兩步
this.$router.go(2)

我的實(shí)戰(zhàn)案例：

// 支付完成后禁止返回
paySuccess() {
  this.$router.replace('/success')
  // 再鎖死后退按鈕
  window.history.pushState(null, null, document.URL)
}

三、特殊跳轉(zhuǎn)場(chǎng)景處理

1. 帶參數(shù)跳轉(zhuǎn)的三種姿勢(shì)

// 方式1：query傳參（URL可見）
this.$router.push({
  path: '/search',
  query: { keyword: 'Vue' }  // → /search?keyword=Vue
})

// 方式2：params傳參（URL不可見）
this.$router.push({
  name: 'user',
  params: { id: 123 }  // → /user/123（需提前配置動(dòng)態(tài)路由）
})

// 方式3：props解耦（推薦?。?
{
  path: '/user/:id',
  name: 'user',
  component: User,
  props: true  // 自動(dòng)將params轉(zhuǎn)為props
}

2. 跳轉(zhuǎn)前確認(rèn)攔截

this.$router.push({
  path: '/important',
  query: { confirm: true }
}).catch(err => {
  // 用戶取消了導(dǎo)航
  if (err.name === 'NavigationDuplicated') {
    alert('別急，已經(jīng)在當(dāng)前頁(yè)啦！')
  }
})

四、小楊的跳轉(zhuǎn)最佳實(shí)踐

簡(jiǎn)單跳轉(zhuǎn)：直接用<router-link>，省心省力

復(fù)雜跳轉(zhuǎn)：用編程式導(dǎo)航，靈活控制

參數(shù)傳遞：

  • 需要分享URL用query
  • 敏感信息用params
  • 組件復(fù)用推薦props

異常處理：永遠(yuǎn)記得catch導(dǎo)航錯(cuò)誤

最后送大家一個(gè)路由跳轉(zhuǎn)攔截的實(shí)用代碼：

router.beforeEach((to, from, next) => {
  if (to.path === '/vip' && !我.isVip) {
    next('/pay') // 不是VIP？先去充值！
  } else {
    next()
  }
})

今天的路由跳轉(zhuǎn)小課堂就到這里啦！覺得有用的話，別忘了點(diǎn)個(gè)贊～有什么問題歡迎評(píng)論區(qū)交流，我看到都會(huì)回復(fù)的！

寫在最后?

到此這篇關(guān)于Vue實(shí)現(xiàn)路由跳轉(zhuǎn)的多種方式匯總的文章就介紹到這了,更多相關(guān)Vue路由跳轉(zhuǎn)方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue3組件庫(kù)添加腳本的實(shí)現(xiàn)示例

    vue3組件庫(kù)添加腳本的實(shí)現(xiàn)示例

    本文主要介紹了vue3組件庫(kù)添加腳本的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2024-06-06
  • 使用vue自定義如何實(shí)現(xiàn)Tree組件和拖拽功能

    使用vue自定義如何實(shí)現(xiàn)Tree組件和拖拽功能

    這篇文章主要介紹了使用vue自定義如何實(shí)現(xiàn)Tree組件和拖拽功能，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
    2022-12-12
  • vue實(shí)現(xiàn)秒殺倒計(jì)時(shí)組件

    vue實(shí)現(xiàn)秒殺倒計(jì)時(shí)組件

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)秒殺倒計(jì)時(shí)組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-04-04
  • 從零實(shí)現(xiàn)一個(gè)vue文件解析器

    從零實(shí)現(xiàn)一個(gè)vue文件解析器

    本文就討論下怎么實(shí)現(xiàn)一個(gè)處理.vue文件的loader，以及用loader處理完.vue文件怎么把內(nèi)容渲染在瀏覽器上并實(shí)現(xiàn)簡(jiǎn)單的響應(yīng)式，對(duì)vue文件解析器相關(guān)知識(shí)感興趣的朋友一起看看吧
    2022-06-06
  • Vue封裝實(shí)現(xiàn)可配置的搜索列表組件

    Vue封裝實(shí)現(xiàn)可配置的搜索列表組件

    在Vue.js開發(fā)中,經(jīng)常會(huì)遇到需要展示搜索和列表的需求,為了提高代碼復(fù)用性和開發(fā)效率,我們可以封裝一個(gè)可配置的搜索列表組件,下面我們就來講講如何實(shí)現(xiàn)這樣一個(gè)組件吧
    2023-08-08
  • Vue中使用Three.js實(shí)現(xiàn)動(dòng)態(tài)海洋與天空背景

    Vue中使用Three.js實(shí)現(xiàn)動(dòng)態(tài)海洋與天空背景

    文章介紹在Vue中使用Three.js實(shí)現(xiàn)動(dòng)態(tài)海洋與天空背景,通過組合式API管理場(chǎng)景生命周期,結(jié)合Water和Sky類創(chuàng)建水面波動(dòng)及天空效果,動(dòng)態(tài)調(diào)整太陽(yáng)位置,適配窗口變化并清理資源,提升登錄頁(yè)視覺效果與3D渲染集成能力
    2025-06-06
  • vue keep-alive多層級(jí)路由支持問題分析

    vue keep-alive多層級(jí)路由支持問題分析

    這篇文章主要介紹了vue keep-alive多層級(jí)路由支持,在文章開頭給大家介紹了keep-alive使用問題，解決使用keep-alive include屬性問題，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下
    2023-03-03
  • vue圖片拖拉轉(zhuǎn)放大縮小組件使用詳解

    vue圖片拖拉轉(zhuǎn)放大縮小組件使用詳解

    這篇文章主要為大家詳細(xì)介紹了vue圖片拖拉轉(zhuǎn)放大縮小組件的使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-10-10
  • vue項(xiàng)目打包清除console.log的四種方法總結(jié)

    vue項(xiàng)目打包清除console.log的四種方法總結(jié)

    大家在項(xiàng)目開發(fā)的時(shí)候,需要看看一些后端接口返回的結(jié)果,會(huì)多次使用console.log項(xiàng)目開發(fā)完成打包的時(shí)候,發(fā)現(xiàn)控制臺(tái)一堆的console.log,非常頭疼,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目打包清除console.log的四種方法,需要的朋友可以參考下
    2023-04-04
  • vue el-table實(shí)現(xiàn)行內(nèi)編輯功能

    vue el-table實(shí)現(xiàn)行內(nèi)編輯功能

    這篇文章主要為大家詳細(xì)介紹了vue el-table實(shí)現(xiàn)行內(nèi)編輯功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2019-12-12

最新評(píng)論