亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue3中使用router路由實現(xiàn)跳轉(zhuǎn)傳參的方法

 更新時間：2023年03月30日 11:36:55   作者：鍵盤敲爛工資上萬  
這篇文章主要介紹了vue3中使用router路由實現(xiàn)跳轉(zhuǎn)傳參的方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

大家好，今天和大家分享一下vue3中如何進(jìn)行跳轉(zhuǎn)并進(jìn)行傳參。

前言

vue3取消了vue2部分api，所以路由跳轉(zhuǎn)和傳值的方式會有所不同。
我們今天主要講router.push(location, onComplete?, onAbort?)
vue3中新增API：useRouter和useRoute

一、路由跳轉(zhuǎn)

1.首先在需要跳轉(zhuǎn)的頁面引入API—useRouter

import { useRouter } from 'vue-router'

2.在跳轉(zhuǎn)頁面定義router變量

//先在setup中定義
 const router = useRouter()

3.用router.push跳轉(zhuǎn)頁面

// 字符串
router.push('home')
// 對象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 帶查詢參數(shù)，變成 /register?userId=123
router.push({ path: 'register', query: { userId: '123' }})

4.如果有參數(shù)的話，在接收頁面引入API–useRoute

import { useRoute } from 'vue-router'

5.在接收頁面定義變量route，獲取傳過來的變量

//首先在setup中定義
const route = useRoute()
//query
let userId=route.query.userId;
//params
let userId=route.params.userId;

二、頁面?zhèn)鲄⑿枰⒁?/h2>

1.如果提供了 path，params 會被忽略，但query 沒有這種情況，此時需要提供路由的 name 或手寫完整的帶有參數(shù)的 path

const userId = '123'
router.push({ name: 'user', params: { userId }})
router.push({ path: `/user/${userId}` })
// 這里的 params 不生效
router.push({ path: '/user', params: { userId }})

2.上述規(guī)則同樣適用于 router-link 組件的 to 屬性
3.如果目的地和當(dāng)前路由相同，只有參數(shù)發(fā)生了改變 (比如從一個用戶資料到另一個 /users/1 -> /users/2)，你需要使用 beforeRouteUpdate 來響應(yīng)這個變化 (比如抓取用戶信息)

總結(jié)

到此這篇關(guān)于vue3中使用router路由實現(xiàn)跳轉(zhuǎn)傳參的文章就介紹到這了,更多相關(guān)vue3路由跳轉(zhuǎn)傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • vue axios攔截器常用之重復(fù)請求取消

    vue axios攔截器常用之重復(fù)請求取消

    我們大家在開發(fā)中,經(jīng)常會遇到接口重復(fù)請求導(dǎo)致的各種問題,下面這篇文章主要給大家介紹了關(guān)于axios攔截器之重復(fù)請求取消的相關(guān)資料,需要的朋友可以參考下
    2021-09-09
  • 關(guān)于vue中如何監(jiān)聽數(shù)組變化

    關(guān)于vue中如何監(jiān)聽數(shù)組變化

    這篇文章主要介紹了關(guān)于vue中如何監(jiān)聽數(shù)組變化，對vue感興趣的同學(xué)，必須得參考下
    2021-04-04
  • vue3.0 CLI - 3.2 路由的初級使用教程

    vue3.0 CLI - 3.2 路由的初級使用教程

    這篇文章主要介紹了vue3.0 CLI - 3.2 - 路由的初級使用教程,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
    2018-09-09
  • vue3?v-bind="$attrs"繼承組件全部屬性的解決方案

    vue3?v-bind="$attrs"繼承組件全部屬性的解決方案

    這篇文章主要介紹了vue3?v-bind=“$attrs“?繼承組件全部屬性的解決方案,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2023-06-06
  • Composition Api封裝業(yè)務(wù)hook思路示例分享

    Composition Api封裝業(yè)務(wù)hook思路示例分享

    這篇文章主要為大家介紹了Composition Api封裝業(yè)務(wù)hook的思路示例分享，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2022-07-07
  • vue項目啟動出現(xiàn)cannot GET /服務(wù)錯誤的解決方法

    vue項目啟動出現(xiàn)cannot GET /服務(wù)錯誤的解決方法

    這篇文章主要介紹了vue項目啟動出現(xiàn)cannot GET /服務(wù)錯誤的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • tauri和vue通信的問題解決方案示例詳解

    tauri和vue通信的問題解決方案示例詳解

    這篇文章主要為大家介紹了tauri和vue通信的問題解決方案示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-10-10
  • Element實現(xiàn)登錄+注冊的示例代碼

    Element實現(xiàn)登錄+注冊的示例代碼

    登錄注冊是最常用的網(wǎng)站功能,本文主要介紹了Element實現(xiàn)登錄+注冊的示例代碼,具有一定的參考價值,感興趣的可以了解一下
    2023-09-09
  • vue router-link 默認(rèn)a標(biāo)簽去除下劃線的實現(xiàn)

    vue router-link 默認(rèn)a標(biāo)簽去除下劃線的實現(xiàn)

    這篇文章主要介紹了vue router-link 默認(rèn)a標(biāo)簽去除下劃線的實現(xiàn)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • Vue組件間的雙向綁定示例解析

    Vue組件間的雙向綁定示例解析

    這篇文章主要介紹了Vue組件間的雙向綁定，我們都知道當(dāng)父組件改變了某個值后，如果這個值傳給了子組件，那么子組件也會自動跟著改變，但是這是單向的，使用v-bind的方式，即子組件可以使用父組件的值，但是不能改變這個值
    2023-03-03

最新評論