vue路由传参有几种方式

原文链接：https://blog.csdn.net/m0_37843876/article/details/108196266

一、params

params有三种传参形式

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

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

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

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

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.params.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匹配路由的编程式导航形式 不会在路径中带有参数（且刷新页面参数丢失），其他都会带有参数值（刷新页面参数不丢失）