在vue中如何使用路由參數傳遞

這篇文章主要為大家介紹了關於vue中路由參數傳遞遇到的坑的相關資料，文中透過範例程式碼介紹的非常詳細，對大家的學習或工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。

前言

vue中路由跳轉傳參數有多種,自己常用的是下面的幾種

• #透過router-link進行跳躍

• 透過程式導航進行路由跳轉

本文主要跟大家介紹了關於vue路由參數傳遞遇到的一些坑，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧。

首先我的路由的定義

{
 path: '/b',
 name: 'B',
 component: resolve => require(['../pages/B.vue'], resolve)
}

我從A元件跳到B元件，並透過路由資訊物件傳遞一些參數

this.$router.push({
 path: '/b',
 params: {
  paramA: 'a' 
 },
 query:{
  paramB: 'b'
 }
})

在B元件中取得參數

this.$route.query.paramB  //b
this.$route.params.paramA //undefined

透過路由的params物件傳遞過來的參數paramB始終是undefined，始終找不到原因。透過查閱資料，終於找到原因，那是因為路由的params物件使用，必須要透過路由名來調用路由，而不同透過path來調用，而query物件則沒有這個要求。

所以我們修改下程式碼：

this.$router.push({
 name: 'B',
 params: {
  paramA: 'a' 
 },
 query:{
  paramB: 'b'
 }
})

將path參數換成對應的路由名稱就可以了，這時候取得參數就一切正常了。

this.$route.query.paramB  //b
this.$route.params.paramA //a

上面是我整理給大家的，希望未來會對大家有幫助。

相關文章：

在微信小程式中如何使用audio元件

在微信小程式中如何使用video元件播放視頻

在微信小程式中如何實作下載進度條

#在javaScript中如何使用手機號碼校驗工具類別PhoneUtils

#

以上是在vue中如何使用路由參數傳遞的詳細內容。更多資訊請關注PHP中文網其他相關文章！