在我们开发vue项目的时候，路由传参几乎是我们必须要用到的，一般出现场景是，当我们点击某个组件的某个按钮时跳转到另一个组件中，并携带参数，便于第二个组件获取数据。下面我就来说说vue路由传参的三种方式：
方案一：
通过：冒号的的形式传递传参
页面刷新数据不会丢失
getDescribe(id) {
// 直接调用$router.push 实现携带参数的跳转 this.$router.push({
path: `/describe/${
id}`, }) 方案一需要配置的对应路由如下：
{
path: '/describe/:id', name: 'Describe', component: Describe } this.$route.params.id 方案二：
通过params的方式，路径不会显示传递的参数
页面刷新数据会丢失
在第一个组件中，通过路由属性中的name来确定匹配的路由，通过params来传递参数。
this.$router.push({
name: 'Describe', params: {
id: id } }) 对应路由配置: 这里可以添加:/id 也可以不添加，添加数据会在url后面显示，不添加数据就不会显示
{
// 这就是没添加的情况 path: '/describe', name: 'Describe', component: Describe } 第二个组件中：这样来获取参数
this.$route.params.id 方案三：
通过query的方式也就是 ？的方式路径会显示传递的参数
this.$router.push({
path: '/describe', query: {
id: id } }) 对应路由配置：
{
path: '/describe', name: 'Describe', component: Describe } 第二个组件: 这样来获取参数
this.$route.query.id 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/208101.html原文链接：https://javaforall.net
