vue路由传参到底有几种方式

2024-07-14 20:17| 来源: 网络整理| 查看: 265

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

一、params params有三种传参形式

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

//配置路由 path:'/path/:id' //传递方式，在path后面跟上对应的值 //获取参数 $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.query.name //传递后形成的路径，刷新页面，参数丢失 /path 二、query query有三种传参形式

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

如有错误，请指出，谢谢！

【本文地址】

vue路由传参到底有几种方式

vue路由传参到底有几种方式

今日新闻

推荐新闻