vue项目，点击按钮以后路由被改变

最新推荐文章于 2024-07-11 15:03:42 发布

real_lt

最新推荐文章于 2024-07-11 15:03:42 发布

阅读量1.8k

点赞数

分类专栏： Vue 文章标签： vue button

本文链接：https://blog.csdn.net/real_lt/article/details/103277336

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前一阵子在做项目修改样式时，点击了页面上的按钮后，路由被自动添加了“？”，导致闪屏
该项目使用了elementUI组件，代码示例

<div>
  <!-- form筛选表单 -->
  <el-form >
    <div >
        <el-form-item class="icon">
          <el-input ></el-input>
        </el-form-item>
        <div>
          <button class="blue icon" @click="add">	//点击后会触发一个新增的dialog
            <i class="el-icon-plus"></i> 新增
          </button>
        </div>
    </div>
  </el-form>
</div>

由于涉及到项目，所以只贴出了部分代码
此时路由为http://localhost:8080/A/B
此时点击button后，路由变成了http://localhost:8080/A/B？同时页面闪屏
这是因为在这里我们使用了form表单，点击button按钮后会触发它的默认事件，即“提交”
解决方案，使用@click.prevent阻止默认事件，代码如下：

<div>
  <!-- form筛选表单 -->
  <el-form >
    <div >
        <el-form-item class="icon">
          <el-input ></el-input>
        </el-form-item>
        <div>
          <button class="blue icon" @click.prevent="add">	//改动在这里
            <i class="el-icon-plus"></i> 新增
          </button>
        </div>
    </div>
  </el-form>
</div>