vue点击提交按钮带参跳转页面

在Vue中，我们可以使用Vue Router来实现点击提交按钮并带参跳转页面的功能。

首先，您需要在Vue项目中安装并配置Vue Router。安装命令如下：

npm install vue-router

然后，在您的Vue组件中，您可以使用以下代码来实现点击提交按钮并带参跳转页面的功能：

HTML代码：

<template>
  <form>
    <input type="text" v-model="username">
    <input type="text" v-model="email">
    <button type="submit" @click.prevent="submitForm">Submit</button>
  </form>
</template>

JavaScript代码：

<script>
  import { router } from './router'; // 导入Vue Router配置文件
  
  export default {
    data() {
      return {
        username: '',
        email: ''
      }
    },
    methods: {
      submitForm() {
        // 构造url参数
        const params = new URLSearchParams({
          username: this.username,
          email: this.email
        });
        
        // 跳转到目标页面
        router.push({ path: '/targetPage?' + params.toString() });
      }
    }
  }
</script>

在这个示例中，当用户点击提交按钮时，会调用submitForm()函数。该函数会使用URLSearchParams对象来构造url参数，并使用Vue Router的push方法跳转到目标页面。在目标页面中，您可以使用$router对象来获取这些参数并进行处理。