vue路由的兩種方式（路由傳參）

query和params區別

query類似 get, 跳轉之後頁面 url後面會拼接引數,類似?id=1, 非重要性的可以這樣傳, 密碼之類還是用params重新整理頁面id還在

params類似 post, 跳轉之後頁面 url後面不會拼接引數 , 但是重新整理頁面id 會消失

一 . 宣告式 router-link

1.0 不帶引數   形如：http://localhost:3000/#/home/newslist

23
路由配置4 5
6"/home/newslist
">7"
"> 8"
"> //
name,path都行, 建議用name 910
//11
121.1帶引數 形如（例如從商品進入詳情）：http://localhost:3000/#/home/newsinfo/13


1415
路由配置
16 //
或者17 
1819
"'/home/newsinfo/' + item.id
">20"
}"> //
router.js用上面的
2122
//params傳引數 (類似post) 直接跟引數的形式
23//
不配置path ,第一次可請求,重新整理頁面id會消失
24//
配置path,重新整理頁面id會保留
2526
//html 取參 $route.params.id
27//
script 取參 this.$route.params.id
2829
1.2帶引數 形如（例如從商品進入詳情）：http://localhost:3000/#/home/newsinfo?id=13


3031
路由配置
32 3334"
'/home/newsinfo?id=' + item.id
">35"
'/home/newsinfo?id=' + item.id
">
3637
//query傳引數 (類似get,url後面會顯示引數)
38//
路由可不配置
39//
html 取參 $route.query.id
40//
script 取參 this.$route.query.id

二： 程式設計式：this.$router.push() (點選事件傳id，函式裡面接收呼叫)

1.  不帶引數 形如：http://localhost:3000/#/home/newslist


路由配置
this.$router.push('
/home')
this.$router.push()
this.$router.push()
2.1. params傳參 形如（例如從商品進入詳情）：http://localhost:3000/#/home/13

//
router.js 路由配置
//或者
this.$router.push('
/home/
' +id)
this.$router.push(}) //
只能用 name 
//params傳引數 (類似post) 直接跟引數的形式
//不配置path ,第一次可請求,重新整理頁面id會消失
//配置path,重新整理頁面id會保留 //
html 取參 $route.params.id
//script 取參 this.$route.params.id
2.2. query傳參 形如（例如從商品進入詳情）：http://localhost:3000/#/home?id=13


路由配置
this.$router.push('
/home?id=
' +id)
this.$router.push(})
this.$router.push(}) //
query傳引數 (類似get,url後面會顯示引數)
//html 取參 $route.query.id
//script 取參 this.$route.query.id

vue路由傳參的兩種方式

路由傳參的兩種方式params和query params相當於post，引數資訊不會顯示在位址列中，query相當於get,會把引數資訊暴露在位址列中 params傳參 第一步 在router.js中配置路由 例 import params from components params index ...

Vue路由傳參方式

傳送引數 在路由中寫好 接收引數 route.name傳送引數 this.router.push 接收引數 注意 該方式不需要配置路由 傳送引數 this.router.push news userid 123 this.router.push this.router.push 接收引數 注意 該方...

vue路由傳參的兩種方式,實現返回上個頁面不重新整理

我的專案是當在新增頁面 下面叫a頁面 先提交一些資料,然後跳轉到下乙個頁面 下面叫b頁面 再填寫資料,然後返回到新增的頁面 之前我直接跳轉回b頁面goback 這樣的話跳轉回來a頁面就什麼資料都沒有了 解決方法有兩種,一種是在位址列裡面拿引數 在b頁面拿取 this.route.params.id然...