vue-router传递参数方式详解

在开发项目中遇到需要携带参数跳转页面的需求，来记个笔记

方法1.(params传值)

以下是主页面跳转方法

toEditInfo() {  this.$router.push({path: '/XXX/XXX',params:{     edit:true   }    });}

以下是目标页面方法

created(){    this.editStatus =  this.$route.query.params;    console.log('editStatus',this.editStatus )}

提示：该方法传递的值不会在地址栏中显示，但刷新页面数据会消失

---------------------------------------------------------------------------------------------------------------------------------

 方法2.(query传值)

以下是主页面跳转方法

toEditInfo() {  this.$router.push({path: '/XXX/XXX',query:{     edit:true   }    });}

以下是目标页面方法

created(){    this.editStatus =  this.$route.query.edit;    console.log('editStatus ',this.editStatus )}

提示：该方法传递的值会在地址栏中显示，刷新页面数据不会消失

---------------------------------------------------------------------------------------------------------------------------------

方法3.(动态路由拼接)

以下是主页面跳转方法

toEditInfo() {  this.$router.push({path: '/XXX/XXX/true'    });}

以下是目标页面方法

created(){    this.editStatus =  this.$route.params.edit;    console.log('editStatus ',this.editStatus )}

这种方法需要修改路由

routes: [    {      path: '/XXX/XXX/:edit',      name: 'auth',      component:Auth    }  ]

提示：该方法传递的值会在地址栏中显示，刷新页面数据不会消失

重点重点重点：

在获取数据时是route不是router！！！！！

如果本文章对您有帮助，麻烦点个赞吧~