vue中使用url传参问题

vue Router中url传参使用不同写法的区别

1. JS传参、接收参数的基本写法 （注意 path、query配套/ name、params配套）

query传参和接收参数：

// 传参
this.$router.push({
   path: '/detail',
   query: {
      id: id
   }  
})
// 接收参数
this.$route.query.id

params传参和接收参数 (params只能通过name来引入路由，path会undefined || 如果提供了path，params会被忽略)

// 传参(router)
this.$router.push({
   name: 'Detail',
   params: {
      id: id
   }  
})
// 接收参数 (route!!!!看清)
this.$route.params.id

Tips: 简单说query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，浏览器刷新页面不会消失，而params相当于post请求，参数不会在地址栏中显示，浏览器刷新页面后消失。

2.地址栏表现形式：

query: /login?id=10&name=xx

params: /login/10/xx

Tips: params这里的10和xx对应的是/:id/:name 这两个参数可以不写 那么就不会在地址栏上显示 不过刷新页面参数会消失 写上参数刷新页面 参数不会消失