鍍金池/ 問(wèn)答/HTML/ vue參數(shù)傳遞查詢字符串

vue參數(shù)傳遞查詢字符串

vue項(xiàng)目，我有一個(gè)訂單(order)列表頁(yè),對(duì)應(yīng)路徑為：test/order/all，
還有一個(gè)訂單詳情頁(yè)，對(duì)應(yīng)路徑：test/order/detail?id=123456
想根據(jù)訂單id，動(dòng)態(tài)路由匹配，因?yàn)槁窂街袔в凶址?問(wèn)號(hào)、等號(hào)、訂單號(hào)）,我的Path該怎么寫(xiě)呢？


  
  { 
  path:'/order/detail?id=:id',
  component:OrderDetail,
},


我是這樣寫(xiě)的，寫(xiě)的不對(duì)，因此找不到對(duì)應(yīng)組件，正確的路徑 Path的寫(xiě)法是什么呢，求助。
回答
編輯回答
詆毀你

1.動(dòng)態(tài)路由是指

{

  path:'/order/detail:id',
  component:OrderDetail,

},

    
調(diào)用  `this.router.push({path:'/order/detail/132465'})`
頁(yè)面實(shí)際URL表現(xiàn) /order/detail  (當(dāng)前頁(yè)面`this.$route.params.id`  可獲取參數(shù))

2.你的需求是url傳參

建議這樣：
路由不用改動(dòng)，跳轉(zhuǎn)的時(shí)候直接 `this.router.push({path:'/order/detail',query{id:132}})`
this.$route.query.id可獲取參數(shù)
2017年7月31日 18:56
編輯回答
淺淺

vue-router里對(duì)動(dòng)態(tài)路由是通過(guò)/path/:id的方式來(lái)實(shí)現(xiàn)匹配的

// 方法1
 { 
  path:'/order/detail/:id',
  component:OrderDetail
}
然后在OrderDetail組件里調(diào)用this.$route.params.id獲取

// 方法2
在`path`后面加上 '?q={id}' 比如: /order/detail/id?q=123
然后在組件里調(diào)用this.$route.query.id可以獲取id

高級(jí)點(diǎn)的操作,也可以用props:true來(lái)實(shí)現(xiàn)解耦.

官網(wǎng)文檔了解一下

2017年12月3日 14:34