vue 点击按钮几种总结

1. 点击按钮跳转到新页面

<el-button type="text" icon="el-icon-plus" @click="add"></el-button>


export default {
  methods: {
    add () {
      this.$router.push({path: '/home'})
    }
  }
}

2. 跳转到有参数的页面， 如 /home/1 , /home/2 那种的

<el-button type="text" icon="el-icon-plus" @click="add"></el-button>

export default {
  methods: {
    add () {
      this.$router.push({path: '/home/' + res.data.id})
    }
  }
}

3. 点击出对话框二次确认 ( 一般是点击删除的时候）

<el-button type="text" icon="el-icon-delete" @click="deleteVisible = true"></el-button>

<el-dialog
    title="提示"
    :visible.sync='deleteVisible'
    width="30%">
    <span>确认删除？</span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="deleteVisible = false">取消</el-button>
      <el-button @click="delete_info">确认</el-button>
    </span>
</el-dialog>


export default {
  methods: {
    delete_info () {
      this.deleteVisible = false
      this.$router.push({path: '/home/' + this.$route.params.id})
    }
  }
}

 

转载于:https://www.cnblogs.com/mlllily/p/10796391.html