vue前端 按钮和传参路由跳转绑定

在 Vue 前端中，可以使用 `router-link` 组件来创建跳转链接，同时可以通过 `to` 属性传递参数。具体实现步骤如下：

1. 在 Vue 组件的模板中，使用 `router-link` 组件创建跳转链接，并通过 `to` 属性指定跳转路径和参数，例如：

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

上面的代码会创建一个跳转链接，点击后会跳转到路径为 `/user` 的页面，并将参数 `id` 的值设置为 `123`。

2. 在 Vue 路由配置中，定义对应的路由规则，例如：

const routes = [
  { path: '/user', component: UserComponent }
]

上面的代码定义了一个路径为 `/user` 的路由规则，指定了对应的组件 `UserComponent`。

3. 在 Vue 组件中，通过 `$route` 对象获取路由参数，例如：

export default {
  methods: {
    handleClick() {
      const id = this.$route.query.id
      // 处理参数
    }
  }
}

上面的代码定义了一个点击事件处理函数 `handleClick`，通过 `$route.query.id` 获取路由参数，并进行相应的处理。

综上所述，Vue 前端按钮和传参路由跳转绑定的实现步骤如下：

1. 使用 `router-link` 组件创建跳转链接，并通过 `to` 属性传递参数；
2. 在 Vue 路由配置中，定义对应的路由规则；
3. 在 Vue 组件中，通过 `$route` 对象获取路由参数。