Vue中路由傳參

2021-10-08 14:17:23 字數 1611 閱讀 9785

按大類有兩種傳遞方式,分別是params和query。

其中params又分為兩種,即在url中顯示引數和不顯示引數。

1、params傳參,顯示引數:

這種情況屬於動態路由,需要提前在路由中配置好,

如:{path:「user/:id」,component:user},

如id為12345,這時導航欄中的url會顯示/user/12345,在頁面中獲取多傳id的方式為this.rou

te.p

aram

s.id

;這種傳

參方式實

際上是r

esul

tful

風格的傳

遞方式。

2、ur

l傳參,

不顯示參

數如:t

his.

route.params.id;這種傳參方式實際上是resultful風格的傳遞方式。 2、url傳參,不顯示引數 如: this.

route.

para

ms.i

d;這種

傳參方式

實際上是

resu

ltfu

l風格的

傳遞方式

。2、u

rl傳參

,不顯示

引數如:

this

.router.push

需要注意一點,這裡只能用name而不能用path

這時在路由導航中url只顯示位/user,並不會顯示後邊的引數12345。在頁面中獲取id的方式同上。

3、query、顯示引數

如:this.rou

te人.

push

(nam

e:「u

ser」

,que

ry:{

id

:12345},

∗注意這

裡nam

e也可以

用pat

h定位到

元件,但

建議統一

使用na

me∗在

頁面上獲

取id的

方式為t

his.

route人.push(name:「user」,query:{id:12345}, *注意這裡name也可以用path定位到元件,但建議統一使用name* 在頁面上獲取id的方式為this.

route人

.pus

h(na

me:「

user

」,qu

ery:

{id:

1234

5},∗

注意這裡

name

也可以用

path

定位到組

件,但建

議統一使

用nam

e∗在頁

面上獲取

id的方

式為th

is.router.query,這時在路由導航中url會顯示為/user?id=12345

上面就是路由傳參的幾種方式,這裡再補充一點關於url的組成:

協議+hostname+埠號(預設8080一般省略)+path+query查詢(格式為:?key=value)

vue中路由巢狀 路由傳參

在vue中使用vue router方便我們進行頁面之間的跳轉,元件 components 對映到路由 routes 然後告訴 vue router 在 渲染它們。每個路由應該對映乙個元件。go to foo go to bar 實現路由跳轉的兩種方法,一種為path,另一種為name path he...

Vue路由傳參

getdescribe id 方案一,需要對應路由配置如下 很顯然,需要在path中新增 id來對應 rou ter.push 中pat h攜帶的 引數。在 子元件中 可以使用 來獲取傳 遞的引數 值。th is router.push 中path攜帶的引數。在子元件中可以使用來獲取傳遞的引數值。t...

vue路由傳參

傳參方式一 router link方式 1.path 是要跳轉的路由路徑,也可以是路由檔案裡面配置的 name 值,兩者都可以進行路由導航 2.params 是要傳送的引數,引數可以直接key value形式傳遞 3.query 是通過 url 來傳遞引數的同樣是key value形式傳遞 2,3兩...