vue项目实例中用query传参如何实现跳转效果

Vue项目中实现通过query传参跳转页面有以下两种方法：

方法一：使用router-link跳转页面

router-link是Vue Router提供的路由跳转组件，通过它可以实现页面之间的跳转，同时可以传递参数。下面是一个示例：

<template>
  <router-link :to="{name: 'detail', query: {id: 1}}">跳转到详情页</router-link>
</template>

<script>
export default {
  name: 'HomePage',
}
</script>

在上面的示例中，我们通过router-link组件跳转到detail路由，同时传递了一个名为id的参数，其值为1。在接收参数的组件中就可以通过this.$route.query.id来获取传递的参数值。

方法二：使用编程式导航跳转页面

编程式导航是通过代码来实现页面之间的跳转，相当于调用router实例的方法来跳转页面。可以在方法中通过query属性传递参数。下面是一个示例：

<template>
  <button @click="goDetail()">跳转到详情页</button>
</template>

<script>
export default {
  name: 'HomePage',
  methods: {
    goDetail() {
      this.$router.push({ name: 'detail', query: { id: 1 }})
    }
  }
}
</script>

在上面的示例中，我们通过$router.push方法跳转到detail路由，并传递了一个名为id的参数，其值为1。在接收参数的组件中就可以通过this.$route.query.id来获取传递的参数值。

无论使用何种方式进行跳转，接收参数的组件中都可以通过this.$route.query.xxx来获取传递的参数值，其中xxx为参数名。