通过vue-router传递参数的两种方式

记录一下通过vue-router传递参数的两种方式

1、通过router-link进行跳转

<router-link
      :to="{
        path: 'yourPath',
        query: {
          key: 'value',
        },
      }"
    >
    <button type="button">跳转</button>
</router-link>

// path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航
// query -> 是要传送的参数,参数可以直接key:value形式传递

2、通过$router方式跳转

 // 路由跳转
    函数名() {
      this.$router.push({
        path: "yourPath",
        query: {
          key: 'value',
        },
      });
    },

// path -> 是要跳转的路由路径,也可以是路由文件里面配置的 name 值,两者都可以进行路由导航
// query -> 是要传送的参数,参数可以直接key:value形式传递

待传递页面接收方式

this.$route.query.参数名