vue参数传递查询字符串

Question

vue项目，我有一个订单(order)列表页,对应路径为：test/order/all，
还有一个订单详情页，对应路径：test/order/detail?id=123456
想根据订单id，动态路由匹配，因为路径中带有字符串(问号、等号、订单号）,我的Path该怎么写呢？

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


我是这样写的，写的不对，因此找不到对应组件，正确的路径 Path的写法是什么呢，求助。

Answer 1

1.动态路由是指

{

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

},

    
调用  `this.router.push({path:'/order/detail/132465'})`
页面实际URL表现 /order/detail  (当前页面`this.$route.params.id`  可获取参数)

2.你的需求是url传参

建议这样：
路由不用改动，跳转的时候直接 `this.router.push({path:'/order/detail',query{id:132}})`
this.$route.query.id可获取参数

Answer 2

vue-router里对动态路由是通过/path/:id的方式来实现匹配的

// 方法1
 { 
  path:'/order/detail/:id',
  component:OrderDetail
}
然后在OrderDetail组件里调用this.$route.params.id获取

// 方法2
在`path`后面加上 '?q={id}' 比如: /order/detail/id?q=123
然后在组件里调用this.$route.query.id可以获取id

高级点的操作,也可以用props:true来实现解耦.

官网文档了解一下