vue 路由跳转点击按钮跳转到某一个页面并传参数，怎么接受参数

在 Vue 中，可以使用 `$router.push()` 方法来进行路由跳转，并且可以通过传递一个对象参数来传递参数。具体步骤如下：

1. 在点击按钮的方法中，使用 `$router.push()` 方法进行路由跳转，如：

   this.$router.push({ path: '/targetPage', query: { id: '123' } })

在上面的代码中，`path` 表示跳转的目标页面路径，`query` 表示要传递的参数，这里我们传递了一个 `id` 参数，并赋值为 `123`。

2. 在目标页面中，可以通过 `$route.query` 来获取传递的参数，如：

   // 获取 id 参数
   const id = this.$route.query.id

在上面的代码中，`$route.query` 表示获取当前路由的查询参数，这里我们可以获取到之前传递的 `id` 参数。

需要注意的是，如果你使用的是路由的动态参数（如 `/targetPage/:id`），则可以通过 `$route.params` 来获取参数，如：

// 获取动态参数 id
const id = this.$route.params.id

相关问题

vue 路由跳转点击按钮跳转到某一个页面并传参数

在Vue中使用路由跳转并传递参数，可以使用`<router-link>`组件或者`$router.push()`方法。

1. 使用`<router-link>`组件

在模板中使用`<router-link>`组件，并绑定`to`属性来指定跳转的路径，可以使用`query`属性来传递参数，如下所示：

<router-link :to="{path: '/user', query: {id: 123}}">跳转到用户页面</router-link>

在用户页面中，可以通过`this.$route.query`获取传递过来的参数。

2. 使用`$router.push()`方法

在Vue组件中，可以通过`this.$router.push()`方法来实现路由跳转，并传递参数，如下所示：

this.$router.push({path: '/user', query: {id: 123}});

在用户页面中，同样可以通过`this.$route.query`获取传递过来的参数。

注意：如果要传递的参数比较多，可以使用`params`属性来传递参数，但是需要在路由配置中声明参数，具体使用方法可以参考Vue官方文档。

vue 路由跳转点击按钮跳转到某一个页面

在 Vue 中使用 Vue Router 进行页面路由跳转，可以通过以下步骤实现：

1. 在 Vue 程序中安装 Vue Router

npm install vue-router --save

2. 在 Vue 程序中创建路由配置文件 `router.js`

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

3. 在 Vue 组件中使用路由

<template>
  <div>
    <button @click="gotoHome">Go to home</button>
    <button @click="gotoAbout">Go to about</button>
  </div>
</template>

<script>
export default {
  methods: {
    gotoHome() {
      this.$router.push({ path: '/' });
    },
    gotoAbout() {
      this.$router.push({ path: '/about' });
    }
  }
}
</script>

在上面的示例代码中，我们在 Vue 组件中添加了两个按钮，分别用于跳转到首页和关于页面。当用户点击这些按钮时，Vue 组件会调用 `this.$router.push()` 方法进行路由跳转。`this.$router.push()` 方法接收一个路由配置对象，其中 `path` 属性表示需要跳转的页面路径。

注意，在使用 `$router.push()` 方法时，必须先在 Vue 组件中引入 Vue Router，并且要在 Vue Router 的配置文件中定义需要跳转的页面路由。