如何在 URL Vue.js 中发送查询参数

在Vue.js中，我们经常需要将一些数据作为查询参数发送到URL。这些参数可以被后端服务器接收并作为请求参数进行处理。本文将介绍如何在Vue.js中发送查询参数到URL。

通过 $router.push 方法发送查询参数

Vue.js 中的 $router.push 方法可以让我们向URL中发送查询参数。我们可以在 query 对象中指定要发送的参数。以下是一个发送 name 和 age 参数到URL的例子。

this.$router.push({
  path: '/user',
  query: { name: 'John', age: '30' }
})

在浏览器中，URL将显示为：

http://example.com/user?name=John&age=30

通过 $route 对象获取查询参数

在某些情况下，我们可能需要获取URL中的查询参数。Vue.js 中的 $route 对象可以帮助我们获取这些参数。以下是一个获取 name 参数的例子。

mounted() {
  let name = this.$route.query.name
  console.log(name)
}

以上代码将打印出URL中的 name 参数。

在路由配置中定义查询参数

我们还可以在路由配置中定义查询参数。以下是一个将 name 参数定义为路由配置的例子。

const routes = [
  {
    path: '/user',
    component: User,
    name: 'user',
    props: (route) => ({ name: route.query.name })
  }
]

以上代码将把URL中的 name 参数传递给组件 User。

以上是在Vue.js中发送和接收查询参数的常用方法。希望这篇文章能够帮助到你！