vue路由傳參三種方式

vue路由傳參分為三種方式

url形如：「http://localhost:8080/path/1/true」

1、方法中使用模板字串

methods:/$

` })}
}

,

export

default
,test02()
},created()
=this
console.
log(test01, test02)
console.
log(
typeof
(test01)
,typeof
(test02)
)//全是字串型別
}}

1、path形式，強刷頁面，引數不會丟失

2、接收的引數全是字串型別

url形如：「http://localhost:8080/query?test01=1&test02=true」

1、方法中使用

methods:})

}}

3、子頁面通過query接收引數

export

default
,test02()
},created()
=this
console.
log(test01, test02)
console.
log(
typeof
(test01)
,typeof
(test02)
)// string  string
}}

1、path+query形式，強刷頁面，引數不會丟失

2、接收的引數的型別全是字串型別

url形如：「http://localhost:8080/namepath」

1、方法中使用

methods:})

}}

3、子頁面通過params接收引數

export

default
,test02()
},created()
=this
console.
log(test01, test02)
console.
log(
typeof
(test01)
,typeof
(test02)
)// number  boolean
}}

1、name+params形式，強刷頁面，引數會丟失

2、接收的引數的型別不轉換，原來是什麼型別接收的就是什麼型別

1、path形式以及path+query形式，強刷頁面，引數不會丟失，但是會暴露請求引數；name+params形式，強刷頁面，引數會丟失，但是不會暴露請求引數，引數是被隱藏在請求體上。

2、建議用name+params形式，不會暴露請求引數，如果遇到強刷頁面則返回首頁即可

注意，如果頁面跳轉層級太深，比如一級頁面跳轉到二級頁面需要stdid以及stdname，二級頁面跳轉到**頁面需要childid以及childname，

當從**頁面通過this.$router.back
()返回，**頁面並沒有二級頁面需要的stdid以及stdname資料，這就會導致問題。
所以，當二級頁面跳轉到**頁面，即便**頁面並不需要需要stdid以及stdname，依舊需要帶過去。
並且**頁面返回二級頁面不能通過this.$router.back
()返回，還必須通過name+params形式返回二級頁面，否則資料會丟失

Vue路由傳參的三種方式

第一種 父元件 getdescribe1 id 路由 另外路由需要配置，在path中新增 id來對應 router.push 中path攜帶的引數 這種方法引數值會跟在url後面，子元件通過this.route.params.id獲取傳過去的引數 第二種父元件 通過路由屬性中的name來確定匹配的路...

vue三種傳參方式

子元件通過 route.name接收引數 子元件接收 第二種 通過router link中的to屬性 對應路由配置 通過路由中的name屬性來確定匹配的路由，通過params來傳遞引數 params是乙個物件，裡面是key value的形式 gohome 子元件接收 this.route.param...

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

this.router.push 路由配置 在home元件中獲取引數值 this.route.params.id 複製 通過name來匹配路由，通過param來傳遞引數 this.router.push 用params傳遞引數，不使用 id home元件中獲取引數 this.route.params...