vue router query 获取

Vue Router 是 Vue.js 官方提供的路由管理器，用于实现单页应用（SPA）中的路由配置。它提供了一种按需加载的方式来管理页面之间的路由，使得页面之间的切换更加流畅和灵活。 在 Vue Router 中，我们可以通过 query 参数来传递和获取页面之间的参数，让页面之间能够更好地交互和通信。

要在 Vue Router 中使用 query 参数，首先需要在路由路径中定义一个参数，例如：

```javascript

{

path: '/user'

component: User

props: true

children: [

{

path: 'profile'

component: Profile

}

]

}

```

在这个例子中，我们定义了一个名为 `/user` 的路由，该路由会加载一个名为 `User` 的组件，并且通过 `props: true` 将路由参数传递给组件。在 `User` 组件中，我们又定义了一个子路由 `profile`，该子路由加载一个名为 `Profile` 的组件。

接着，在页面中我们可以通过以下方式来传递和获取 query 参数：

```javascript

// 传递参数

this.$router.push({ path: '/user/profile'

query: { id: 1 } })

// 获取参数

this.$route.query.id

```

在这个例子中，我们通过 `$router.push` 方法来跳转到 `/user/profile` 路由，并传递了一个名为 `id` 的参数为 1。接着，在 `Profile` 组件中，我们可以通过 `$route.query.id` 来获取传递过来的参数值。

通过这种方式，我们可以实现页面之间的参数传递和通信，使得页面之间能够更好地互相影响。同时，在有些情况下，我们也可以通过 query 参数来实现一些功能，例如页面的筛选条件、分页信息等。

总之，Vue Router 提供了一种灵活、简单的方式来管理页面之间的路由，并且通过 query 参数的方式可以实现参数的传递和获取，让页面之间能够更好地交互和通信。如果你正在开发一个 Vue.js 单页应用，不妨尝试使用 Vue Router 的 query 参数来实现一些需求，看看它是如何帮助你更好地管理路由的！