Vue3 获取路由传递的 query 参数

15 min read

在 Vue3 中,你可以使用 this.$route.query 来获取路由传递的 query 参数。以下是一个简单的示例:

<template>
  <div>
    <p>Query 参数: {{ query }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      query: null
    }
  },
  mounted() {
    this.query = this.$route.query
  }
}
</script>

在上面的示例中,我们在 mounted 生命周期钩子中,将 this.$route.query 赋值给 query 变量。然后可以在模板中使用 query 变量来展示获取到的 query 参数。