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！！！！！

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