vue路由$router.push()使用query传参的实际开发使用

关于vue路由$router.push()使用query传参的实际开发使用，我将从以下几个方面进行详细讲解。

1. 路由传参

在vue开发中，路由传参是一个非常重要的概念。路由传参可以使我们的组件之间传递数据，可以实现多个组件之间的动态交互。

我们可以通过以下两种方式进行路由传参进行传参：

• params：通过路由路径匹配传递的参数，通常用于传递必须的参数，如：用户id等。
• query：通过url查询字符串传递的参数，通常用于传递可选的参数，如：搜索关键字等。

在本文中，我们会以query参数的传递方式作为主要的讲解内容。

2. 实例分析

2.1 第一个示例

首先，我们来看一个基本的使用示例。

有如下两个组件：

• Home.vue：主页组件，点击一个按钮跳转到Detail.vue。
• Detail.vue：详情页组件，用于接收传递过来的query参数并进行展示。

我们需要实现的功能是，点击Home.vue中的一个按钮，跳转到Detail.vue，并传递一个query参数。然后，在Detail.vue中展示接收到的传递数据。

具体实现过程如下：

1. 在Home.vue中，使用$router.push()方法跳转路由，并在query参数中传递一个值。

<!-- Home.vue -->

<template>
  <div>
    <button @click="toDetail">跳转到详情页</button>
  </div>
</template>

<script>
export default {
  methods: {
    toDetail() {
      this.$router.push({
        path: '/detail',
        query: {
          name: '小明',
          age: 20
        }
      })
    }
  }
}
</script>

在这个示例中，我们在toDetail()方法中，使用$router.push()方法跳转路由，并在query参数中传递了一个名为name，值为小明，并且传递了一个名为age，值为20的数据。

1. 在Detail.vue中，通过$router.query获取到传递过来的query参数，并进行展示。

<!-- Detail.vue -->

<template>
  <div>
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: ''
    }
  },
  created() {
    this.name = this.$route.query.name
    this.age = this.$route.query.age
  }
}
</script>

在这个示例中，我们在created()方法中，通过$router.query获取到传递过来的query参数，并对组件中的属性进行赋值，最终展示在页面上。

2.2 第二个示例

接下来，我们来看一个更加复杂的示例。

有如下两个组件：

• Home.vue：主页组件，用于搜索商品，搜索结果通过query参数传递给Search.vue。
• Search.vue：搜索结果展示组件，用于展示从Home.vue中传递过来的query参数。

我们需要实现的功能是，在Home.vue中输入一个商品名称进行搜索，点击搜索按钮跳转到Search.vue，并将搜索结果通过query参数进行传递，最后在Search.vue中展示搜索结果。

具体实现过程如下：

1. 在Home.vue中，设置一个input输入框和一个按钮，用于输入搜索关键字和进行搜索操作。在搜索操作完成之后，使用$router.push()方法跳转路由，并在query参数中传递一个关键字。

<!-- Home.vue -->

<template>
  <div>
    <input type="text" v-model="keywords">
    <button @click="search">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keywords: ''
    }
  },
  methods: {
    search() {
      this.$router.push({
        path: '/search',
        query: {
          keywords: this.keywords
        }
      })
    }
  }
}
</script>

在这个示例中，我们在search()方法中，使用$router.push()方法跳转路由，并在query参数中传递了一个名为keywords，值为输入框中输入的关键字的数据。

1. 在Search.vue中，通过$router.query获取到传递过来的query参数，并根据关键字进行搜索结果的展示。

<!-- Search.vue -->

<template>
  <div>
    <h2>搜索结果：</h2>

    <ul>
      <li v-for="(item, index) in results" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      results: []
    }
  },
  created() {
    this.search()
  },
  methods: {
    search() {
      const keywords = this.$route.query.keywords

      // 模拟搜索
      setTimeout(() => {
        this.results = [
          `${keywords}的搜索结果1`,
          `${keywords}的搜索结果2`,
          `${keywords}的搜索结果3`
        ]
      }, 1000)
    }
  }
}
</script>

在这个示例中，我们在created()方法中，通过$router.query获取到传递过来的query参数，并将查询结果存储在组件的results属性中，最终展示在页面上。

3. 总结

通过以上两个示例，我们详细讲解了“vue路由$router.push()使用query传参的实际开发使用”的完整攻略。

在vue开发中，路由传参是实现组件之间动态交互的重要方式，对于query参数的传递方式，我们需要在$router.push()方法中设置query对象的属性来传递数据，在接收方通过$router.query来获取传递过来的参数，并进行相应的处理展示。

希望这篇文章能够对大家有所帮助。