路由传参说有几种方式

看了很多篇博客，路由传参说有几种方式的都有，看得我都晕了，都不知道到底有几种了，因为很多博客分析的角度不同，所以把我搞得有点乱，最后还是通过实践来搞清楚了，其实本身就是那么几种形式，但方式其实就两种query和params，下面分别就这两个方式来说：

一、params
params有三种传参形式
1、router-link形式传参【在路径中显示参数，刷新页面参数不丢失】

//配置路由
path:'/path/:id'

//传递方式，在path后面跟上对应的值
<router-link :to="`/path/${id}`"><router-link>
  
//获取参数
$route.params.id

//传递后形成的路径，刷新页面，参数不丢失
/path/id值
1
2
3
4
5
6
7
8
9
10
11
2、编程式导航形式传参，通过path匹配路由【在路径中显示参数，刷新页面参数不丢失】

//配置路由
path:'/path/:id'

//传递方式，通过path匹配路由，且在path后面跟上对应的值
this.$router.push({
  path: `/path/${id}`
})

//获取参数
$route.params.id

//传递后形成的路径，刷新页面，参数不丢失
/path/id值

3、编程式导航形式传参，通过name匹配路由【不在路径中显示参数，刷新页面参数丢失】

//传递方式,通过name匹配路由
this.$router.push({
  name: "name", //路由配置中的name
  params:{
    id:222
  }
});

//获取参数
$route.query.name

//传递后形成的路径，刷新页面，参数丢失
/path

二、query
query有三种传参形式
1、router-link形式传参【在路径中 ？后面显示参数，刷新页面参数不丢失】

//传递方式
<router-link :to="{path:'/path',query:{id:'123'}}"><router-link>
//或者
<router-link :to="/path?id=123"><router-link>

//获取参数
$route.query.name

//传递后形成的路径，刷新页面，参数不丢失
/path?id=123

2、编程式导航形式传参，通过path匹配路由【在路径中 ？后面显示参数，刷新页面参数不丢失】

//传递方式，通过path匹配路由
this.$router.push({
  path:'/path',
  query: {
    id:'123'
  }
})

//获取参数
$route.query.name

//传递后形成的路径，刷新页面，参数不丢失
/path?id=123

3、编程式导航形式传参，通过name匹配路由【在路径中 ？后面显示参数，刷新页面参数不丢失】

//传递方式，通过name匹配路由
this.$router.push({
  name:'name',//路由配置中的name
  query: {
    id:'123'
  }
})

//获取参数
$route.query.name

//传递后形成的路径，刷新页面，参数不丢失
/path?id=123

总结：query和params分别都有三种形式可以传参：

router-link形式
通过path匹配路由的编程式导航形式
通过name匹配路由的编程式导航形式
而这其中只有params方式的 通过name匹配路由的编程式导航形式 不会在路径中带有参数（且刷新页面参数丢失），其他都会带有参数值（刷新页面参数不丢失）