Vue.js 在Vue 3中组件中获取URL查询参数

在本文中，我们将介绍如何在Vue 3的组件中获取URL的查询参数。URL的查询参数是指在URL中通过 “?” 后面的键值对形式传递的参数。在Vue 3中，我们可以使用Vue Router提供的$route对象来获取URL的查询参数。

阅读更多：Vue.js 教程

理解URL查询参数

URL的查询参数通常用于在页面之间传递数据。例如，我们可以使用URL的查询参数来指定某个页面需要展示的数据项。URL的查询参数的格式为 ?key=value，如果有多个参数需要传递，可以使用 “&” 连接。例如，https://example.com/page?key1=value1&key2=value2。

在Vue 3组件中获取URL查询参数

在Vue 3中，我们可以通过$route对象来获取URL的查询参数。$route.query属性返回一个对象，该对象包含了URL的查询参数的键值对。我们可以通过访问这些键值对来获取具体的查询参数的值。

下面是一个示例，演示了如何在Vue 3组件中获取URL的查询参数：

// 在组件中引入Vue Router
import { useRoute } from 'vue-router'

export default {
  name: 'MyComponent',
  mounted() {
    const route = useRoute()
    console.log(route.query.key) // 输出查询参数的值
  }
}

在上面的示例中，我们首先通过import语句引入了useRoute方法。然后在组件的mounted钩子函数中，使用useRoute方法获取了当前组件的$route对象。最后，我们通过访问$route.query.key的方式来获取URL的查询参数的值，并将其打印到控制台。

示例与解释

假设我们有一个Vue 3的组件，用于展示用户的个人信息。该组件需要通过URL的查询参数来判断显示哪个用户的信息。例如，https://example.com/profile?id=123表示需要显示用户ID为123的个人信息。

下面是一个示例代码，展示了如何在Vue 3组件中获取URL的查询参数，并根据查询参数的值来决定展示哪个用户的信息：

<template>
  <div>
    <h1>用户个人信息</h1>
    <div v-if="user">
      <h2>{{ user.name }}</h2>
      <p>{{ user.email }}</p>
    </div>
    <div v-else>
      <p>未找到用户信息</p>
    </div>
  </div>
</template>

<script>
import { useRoute } from 'vue-router'

export default {
  name: 'UserProfile',
  data() {
    return {
      user: null
    }
  },
  mounted() {
    const route = useRoute()
    const userId = route.query.id // 获取URL的查询参数id的值
    this.fetchUser(userId) // 根据参数值获取用户信息
  },
  methods: {
    fetchUser(userId) {
      // 模拟异步获取用户信息
      setTimeout(() => {
        const users = [
          { id: '123', name: '张三', email: 'zhangsan@example.com' },
          { id: '456', name: '李四', email: 'lisi@example.com' }
        ]
        this.user = users.find(user => user.id === userId)
      }, 1000)
    }
  }
}
</script>

在上面的示例中，我们首先定义了一个用于展示用户个人信息的组件UserProfile。在组件的mounted钩子函数中，我们通过useRoute方法获取了当前的$route对象，并使用route.query.id来获取URL的查询参数id的值。

然后，我们定义了一个fetchUser方法，该方法根据用户的ID值来获取用户信息。在示例代码中，为了模拟异步获取用户信息，我们使用setTimeout函数延迟1秒钟执行获取用户信息的操作，并通过用户ID值来查找对应的用户信息。

最后，我们使用v-if和v-else指令来根据是否有用户信息来展示不同的内容。如果有用户信息，我们展示该用户的姓名和邮箱；如果没有找到用户信息，我们展示提示信息“未找到用户信息”。