Vue的路由跳转传参接参

路由跳转

vue3路由跳转点击这里
分为2种方法

1 query =========

通过 this.$router.push{
path:'跳转路径',
query{
传入参数
}
}
然后通过this.$route.query来进行接收

返回上一页

 this.$router.back(); 

效果图

a页面

<template>
  <div class="main">
    <button @click="btnset">点击传参</button>
    <div>你好撒</div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  created() {},
  methods: {
    btnset() {
      this.$router.push({
        path: "/Test1", //这个是跳转的页面
        // vue路由来回跳转时频繁切换可以把path变成name
        // name是定义路由时候添加的name
        //  this.$router.push({
        //   name: "induction",
        //   });
        query: {
          mallCode: "M000989",//这个是传到参 这边是死的
        },
      });
    },
  },
};
</script>
<style scoped>
button {
  margin-bottom: 10px;
  font-size: 30px;
}
</style>

b页面

<template>
   <div>
     <div>{{routerParams}}</div>
   </div>
</template>
<style scoped>

</style>
<script>
export default {
  data(){
    return{
routerParams:''
    }
  },
  created(){
    this.routerParams=this.$route.query.mallCode
  },
  methods:{
     getset(){
       const routerParams = this.$route.query.mallCode
       console.log(routerParams)
     }
  }
}
</script>

2 params ============

a页面

  this.$router.push({
        name: 'homelist', 
        params: {
          mallCode: "M000989",
        },
      });

b页面

data(){
    return{
    params:""
    }
},
created(){
 this.params=this.$route.params.mallCode
}

路由配置

params是通过name来跳转 然后传递的参数需要在path后面写入

 {
    path: '/homeList/:mallCode',
    name: 'homelist',
    component: () => import('../views/homeList.vue')
  }

二者区别

传参可以使用params和query两种方式。

使用params传参只能用name来引入路由，
即push里面只能是name:’xxxx’,不能是path:’/xxx’,
因为params只能用name来引入路由，如果这里写成了path，接收参数页面会是undefined！！！。
使用query传参使用path来引入路由。

params是路由的一部分,必须要在路由后面添加参数名。
query是拼接在url后面的参数，没有也没关系。

二者还有点区别，直白的来说query相当于get请求，
页面跳转的时候，可以在地址栏看到请求参数，
而params相当于post请求，参数不会再地址栏中显示。

参考1