vue路由傳參的幾種基本方式

2022-06-23 21:15:09 字數 3576 閱讀 3837

現有如下場景,點選父元件的li元素跳轉到子元件中,並攜帶引數,便於子元件獲取資料。

父元件中:

for="article in articles" @click="getdescribe(article.id)">

methods:

getdescribe(id) `,

})

方案一,需要對應路由配置如下:

很顯然,需要在path中新增/:id來對應 $router.push 中path攜帶的引數。在子元件中可以使用來獲取傳遞的引數值。

this.$route.params.id
父元件中:通過路由屬性中的name來確定匹配的路由,通過params來傳遞引數。

this.$router.push(

})

對應路由配置: 注意這裡不能使用:/id來傳遞引數了,因為父元件中,已經使用params來攜帶引數了。

子元件中: 這樣來獲取引數

this.$route.params.id
父元件:使用path來匹配路由,然後通過query來傳遞引數

這種情況下 query傳遞的引數會顯示在url後面?id=?

this.$router.push(

})

對應路由配置:

對應子元件: 這樣來獲取引數

this.$route.query.id
1、用法上的剛才已經說了,query要用path來引入,params要用name來引入,接收引數都是類似的,分別是this.$route.query.name和this.$route.params.name。

注意接收引數的時候,已經是$route而不是$router了哦!!

2、展示上的

query更加類似於我們ajax中get傳參,params則類似於post,說的再簡單一點,前者在瀏覽器位址列中顯示引數,後者則不顯示。

檔案結構

定義路由:在定義path路由路徑時定義引數名和格式,如  path: "/one/login/:num" ,router>index.js檔案如下

/* eslint-disable*/

//第一步:引用vue和vue-router ,vue.use(vuerouter)

import vue from 'vue'

import router from 'vue-router'

vue.use(router)

//第二步:引用定義好的路由元件

import childone from '../components/childone'

import childtwo from '../components/childtwo'

import log from '../components/log.vue'

import reg from '../components/reg.vue'

//第三步:定義路由(路由物件包含路由名、路徑、元件、引數、子路由等),每一個路由對映到一個元件

//第四步:通過new router來建立router例項

export default new router(,,],

},]})

在父路由元件上使用router-link進行路由導航,傳參用的形式向子路由元件傳遞引數。使用router-view進行子路由頁面內容渲染,父路由元件childone.vue 如下:

這是父路由childone對應的元件頁面

下面可以點選顯示巢狀的子路由

顯示登入頁面

顯示註冊頁面

子路由通過 this.$route.params.num 的形式來獲取父路由向子路由傳遞過來的引數,子路由元件login.vue如下:

登入介面:這是另一個巢狀路由的內容

效果:

注意:如上所述路由定義的path: "/one/login/:num"路徑和to="/one/login/001"必須書寫正確,否則不斷點選切換路由,會因為不斷將傳遞的值顯示新增到url中導致路由出錯,如下:

傳遞的值存在url中存在安全風險,為防止使用者修改,另一種方式不在url中顯示傳遞的值

定義路由時新增name屬性給對映的路徑取一個別名,router>index.js檔案修改router如下:

export default new router(,,],

},]})

在父路由元件上使用router-link進行路由導航,使用   形式傳遞引數。注意   ': to= ' 前面的冒號,childone.vue元件修改如下:

這是父路由childone對應的元件頁面

下面可以點選顯示巢狀的子路由

顯示登入頁面

顯示註冊頁面

子路由元件頁面獲取父路由傳參方式不變,reg.vue 檔案如下:

登入介面:這是另一個巢狀路由的內容

注意:上述這種利用params不顯示url傳參的方式會導致在重新整理頁面的時候,傳遞的值會丟失;定義路由 router>index.js檔案如下:

export default new router(,,],

},]})

修改路由導航 ,childone.vue 檔案修改如下:

這是父路由childone對應的元件頁面

下面可以點選顯示巢狀的子路由

顯示登入頁面

顯示註冊頁面

子路由元件通過 this.$route.query.num 來顯示傳遞過來的引數,reg.vue 檔案如下:

註冊介面:這是二級路由頁面

效果如下:

ps: 在第一步的定義路由中我們都使用了mode:history 作用就是去除路由跳轉時路由路徑前的 “#”

預設為hash模式,最明顯的標誌是,url上有#號 localhost:8080/#/,路由會監聽#後面的資訊變化進行路由匹配

另一種為history模式,不會有#出現,很大程度上對url進行了美化。需要**注意**history模式在打包後的路由跳轉需要伺服器配合

預設不使用mode:history 如下

vue路由跳轉的方式

vue路由跳轉有四種方式 1 router link 2 this router push 函式裡面呼叫 3 this router rep...

vue路由跳轉的方式

vue路由跳轉有四種方式 1 router link 2 this router push 函式裡面呼叫 3 this router replace 用法同push 4 this router go n 一 不帶參 1 1 router link name path都行 建議用name 注意 rou...

vue路由的兩種方式(路由傳參)

query和params區別 query類似 get 跳轉之後頁面 url後面會拼接引數 類似 id 1 非重要性的可以這樣傳 密碼之類還是用params重新整理頁面id還在 params類似 post 跳轉之後頁面 url後面不會拼接引數 但是重新整理頁面id 會消失 一 宣告式 router link ...