Vue如何进行路由传参

Vue路由传参主要有两种方式

params参数

• 浏览器地址栏中显示参数和不显示参数两种情况主要就是看路由配置。如果配置路由格式：/router/:id，则显示；如果配置的路由格式：/router，则不显示
• 传递的方式：在path后面跟上对应的值

router-link形式传参

1. to的字符串写法

//在路径中会显示参数，刷新页面参数不会丢失。
//配置路由
{
   path: '/user/:id',
   component: User,
},

//路由传参， 跳转并携带params参数，to的字符串写法
<router-link :to="`/user/${id}`" ></router-link>  

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

2. to的对象写法
   路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置

在路径中会显示参数，刷新页面参数不会丢失。
//配置路由
{
   name:'user',
   path: '/user/:id',//使用占位符声明接收params参数
   component: User,
},

//路由传参， 跳转并携带params参数，to的对象写法
<router-link :to="{name:'user', params:{id:666}}">跳转</router-link>  

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

编程式路由导航传参

1. 通过path匹配路由

如果使用params传参,且参数是以对象的形式，跳转路径只能使用name形式而不能用path。

//在路径中会显示参数，刷新页面参数不会丢失。
//配置路由
{
   path: '/user/:id',
   component: User,
},
//路由传参
this.$router.push({path: `/user/${id}`})
// 注意这种写法的params不生效!!
this.$router.push({ path: '/user', params: {id}})    // -> /user

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

2. 通过name匹配路由

//注意！！此时未在路由配置:id，不在路径中显示参数刷新页面参数会丢失
//路由传参
this.$router.push({name:'user',params:{id:666}})

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

query参数

• 配置路由格式：/router，也就是普通配置
• 传递的方式：对象中使用query的key作为传递方式
• 传递后形成的路径：/route?id=123

router-link形式传参

刷新页面参数不会丢失

1. 通过路径path匹配路由

//路由传参

//to的字符串写法
<router-link :to="/user?id=666"><router-link>
//to的对象写法
<router-link :to="{path:'/user',query:{id:'666'}}"><router-link>

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

2. 通过name匹配路由

//路由传参
<router-link :to="{name: 'user', query: {id:'666'}}">按钮</router-link>

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

编程式路由导航传参

刷新页面参数不会丢失

1. 通过path匹配路由

//路由传参 字符串形式
this.$router.push('/user?id=666')
//或者对象形式
this.$router.push({path:'/user',query: {id:'666'}})

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

2. 通过name匹配路由

//路由传参
this.$router.push({name:'user',query: {id:'666'}})

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

params和query的区别

用法：query要用path来引入，params要用name来引入，接收参数都是类似的，分别是 this.$route.query.id 和 this.$route.params.id 。

url地址显示：query更加类似于ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

注意：query刷新不会丢失query里面的数据 ，params刷新会丢失 params里面的数据。

---

本文中部分类容参考：https://blog.youkuaiyun.com/m0_37843876/article/details/108196266