Vue3如何获取地址栏参数

Vue3如何获取地址栏参数

在Vue3中，获取地址栏参数可以使用Vue Router提供的$route对象来获得。$route对象为当前路由跳转信息的一个对象，包含了路由参数，查询参数等信息。我们可以通过该对象获取地址栏参数，如下：

  const id = $route.params.id   // 获取路由参数id
  const search = $route.query.search   // 获取查询参数search

获取路由参数

路由参数是在URL中动态添加的参数，例如：/user/:id。在Vue3中，获取路由参数可以通过$route.params对象的属性名获取。下面是一个获取路由参数id的示例：

  const id = $route.params.id

获取查询参数

查询参数是附加在URL后面通过?key=value拼接的参数。例如：/search?keywords=Vue3。在Vue3中，获取查询参数可以通过$route.query对象的属性名获取。下面是一个获取查询参数search的示例：

  const search = $route.query.search

完整实例

以下是一个完整的示例，演示如何获取路由参数和查询参数：

  import { defineComponent } from 'vue'
  import { useRoute } from 'vue-router'

  export default defineComponent({
    name: 'MyComponent',
    setup() {
      const route = useRoute()

      const id = route.params.id
      const search = route.query.search

      console.log('id: ', id)
      console.log('search: ', search)

      return {}
    }
  })

在上述示例中，我们首先从vue-router中导入useRoute钩子，该钩子可以访问$route对象。然后，我们使用useRoute钩子来获取$route对象，接着使用$route对象的params属性和query属性来获取路由参数和查询参数。

最后，我们将获取到的参数打印出来，以此验证获取到的参数是否正确。