vue中如何攜帶參數(shù)跳轉(zhuǎn)頁面

更新時間：2023年04月14日 08:38:19 作者：愛前端的小周同學

這篇文章主要介紹了vue中如何攜帶參數(shù)跳轉(zhuǎn)頁面問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue攜帶參數(shù)跳轉(zhuǎn)頁面

方法一

path，query（） 這個方法地址欄會出現(xiàn)參數(shù)，不太安全

傳遞頁面：

在這里插入圖片描述

item是獲取到的所有的數(shù)據(jù)，將數(shù)據(jù)賦值給變量。
this.$router.push是跳轉(zhuǎn)的意思。
path放要跳轉(zhuǎn)地址（具體可以去看index.js），query里面放參數(shù)名和要攜帶的參數(shù)。

參數(shù)名（UserId，UserPhone，Price）要在data里面定義。注意：path要與query一起用。

接收頁面：

在這里插入圖片描述

方法二

name，params 地址欄沒有參數(shù)，比較安全

傳遞頁面：

在這里插入圖片描述

使用與上面類似

接收頁面：

在這里插入圖片描述

注意：我之前出現(xiàn)過，name和query一起用的情況。一直傳遞不過去，所以注意name一定與params一起使用。path與query一起使用。

vue頁面跳轉(zhuǎn)，以及攜帶參數(shù)，獲取參數(shù)

js操作路由(即編程式的導航)進行頁面跳轉(zhuǎn)：

1. 返回/前進一頁：

返回：this.$router.go(-1)、this.$router.back()。
前進：this.$router.go(1)

2. 跳轉(zhuǎn)到其他頁：

//params只能用name來引入路由,類似于post，在瀏覽器地址欄中不顯示參數(shù)，
//而query 要用path引入,似于我們ajax中g(shù)et傳參，在瀏覽器地址欄中顯示參數(shù)
this.$router.push("/parent")
this.$router.push({path:"/parent",query:{name:"ace"}) //即瀏覽歷史紀錄保存著,query是參數(shù)。獲取參數(shù)：this.$route.query.name
this.$router.push({path:`/argu/${name}`}) ?//es6帶參數(shù)跳轉(zhuǎn)，針對router.js中配置path: '/argu/:name',。獲取參數(shù)：this.$route.query.name
this.$router.push({name:"parent",params:{name:"ace"}) //帶參數(shù)跳轉(zhuǎn)。獲取參數(shù)：this.$route.params.name

3. 用其他頁替換本頁：

this.$router.replace("/about")或this.$router.replace({name:"parent"})，即瀏覽歷史紀錄沒有了。

4. 基于動態(tài)路由的頁面（path: '/argu/:name'）傳值。

{
? ? path: '/argu/:name',
? ? props:true, ? ? ? ? ? ? //表示允許Argu.vue組件中props:{}中接受name參數(shù)值，然后可以直接渲染在頁面{{name}}
? ? component: () => import( './views/argu.vue' ) ?
}

5. 基于普通頁面?zhèn)鲄?對象模式傳參。

{
? ? path: '/about',
? ? props:{
? ? ? ? food:"香蕉"
? ? }, ? ? ? ? ? ? ? ? ? ? ?//表示允許about.vue組件中props:{}中接受food參數(shù)值，然后可以直接渲染在頁面{{food}}
? ? component: () => import( './views/argu.vue') ?
}

6. 基于普通頁面?zhèn)鲄?函數(shù)模式傳參。

{
? ? path: '/parent',
? ? props: route=>{
? ? ? ? return {
? ? ? ? ? ? food:route.query.food
? ? ? ? }
? ? }, ? ? ? ? ? ? ? ? ? ? ?//表示允許parent.vue組件中props:{}中接受food參數(shù)值，然后可以直接渲染在頁面{{food}}
? ? component: () => import( './views/argu.vue') ?
}