vue路由传参params和query区别

params：路由配置时候要在路径后面加动态配置的参数名 如：/:id，强制刷新会被清空，参数不会显示在路径地址上，

路由配置:
{
      path: '/detail/:id/',   
      name: "detail",
      component: detail//这个details是传进来的组件名称
}

使用路由： 
1:  <router-link :to="{ name: 'details', params: { id: 123 }}">点击按钮</router-link>
2: this.$router.push({name:'details',params:{id:123}})

地址栏显示路径形式：
http://localhost:8081/#/details/123

跳转的方法：
1：this.$router.push( `/detail/${this.$route.params.id}` )
2：this.$router.push( {name:'detail', params:{ id:123 } } )

query：路由配置的时候path不用带参数

路由配置：
{
       path: '/detail',//这里不需要参入参数，参见上面的params写法
       name: "detail",
       component: detail//这个details是传进来的组件名称
 }

使用路由： 
1：<router-link :to="{ name: 'details', query: { id: 123 }}">点击按钮</router-link>
2：this.$router.push({name:'details',query:{id:123}})
3：<router-link :to="{ path: 'details', query: { id: 123 }}">点击按钮</router-link>
4：this.$router.push({path:'details',query:{id:123}})

地址栏显示路径形式：
http://localhost:8080/#/details?id=123

跳转的方法：
1、this.$router.push( `/detail?id=${this.$route.query.id}` )
2：this.$router.push( { path:'detail', query:{ id:123 } } )