美文网首页
button点击后改变路由

button点击后改变路由

作者: 格子GiMi | 来源:发表于2019-04-03 18:13 被阅读0次

    一个bug送给有缘人:
    场景:

    由于自己写的以及element-ui的button样式效果不够优秀,于是从网上down了一个效果极佳的button组件,但是 每点击一下button,都会导致我的路由上多了一个?号
    点击前:


    0.png

    点击后:


    1.png

    检查代码都没有任何问题,代码如下:

    // main.js
    import MButton from '@/components/button'
    Vue.use(MButton);
    
    // @/components/button/button.vue
    <template>
      <button type="button" class="m-button"
              @click="handleClick"
              :disabled="disabled"
              :class="[
          type && 'm-button-' + type,
          size && 'm-button-' + size,
          {
            'm-button-type-plain': plain,
            'm-button-rounded': round,
            'm-button-block': block,
            'active': active,
            'clicked': (effect && clicked && !active)
          }
        ]"
      >
        <slot></slot>
      </button>
    </template>
    handleClick() {
       this.$emit('click')
    }
    
    // @/components/button/index.js
    import MButton from './button'
    
    MButton.install = function (Vue) {
      Vue.component(MButton.name, MButton)
    }
    
    export default MButton
    

    最后才发现,是由于button有一个默认的submit事件,虽然不知道改变路由的原理是什么,但是知道是因为这个submit事件导致的,接下来只要去掉这个submit事件就好了

    // 加上type='button' 就好了
    <button type="button">
    

    相关文章

      网友评论

          本文标题:button点击后改变路由

          本文链接:https://www.haomeiwen.com/subject/rmyzbqtx.html