button无法点击，router-link也不生效

Question

              <div class="table">
                
                <div class="leftcj">
                  <div>
                  <button type="button" class="btn btn-primary"   @click="jumpsmt()" >
                    SMT车间
                  </button></div>
                  <!-- <router-link :to="{path:'/cxhzkb',query:{WorkShop:'SMT'}}">
                    <h5 style="color:white">SMT车间</h5></router-link> -->
                  <div class="tabletop">
                    <h6 style="color: white;">近7天</h6>
                    <smtkb style="height: 90%;"></smtkb>
                  </div>
                  <div class="tablebottom">
                    <h6 style="color: white;">当月</h6>
                    <smtkb2 style="height: 90%;"></smtkb2>
                  </div>
                </div>
                <div class="rightcj">
                  <div><button type="button" class="btn btn-primary"   @click="jumpdip()" >
                    模块车间
                  </button></div>
                  <div class="tabletop">
                    <h6 style="color: white;">近7天</h6>
                    <mkkb style="height: 90%;"></mkkb>
                  </div>
                  <div class="tablebottom">
                    <h6 style="color: white;">当月</h6>
                    <mkkb2 style="height: 90%;"></mkkb2>
                  </div>
                
                </div>
              </div>
              <div class="table" >
                <div class="leftcj">
                  <div ><button type="button" class="btn btn-primary"   @click="jumpdx()" style=" pointer-events: none;">
                    单相车间
                  </button></div>
                  <div class="tabletop">
                    <h6 style="color: white;">近7天</h6>
                    <dxkb style="height: 90%;"></dxkb>
                  </div>
                  <div class="tablebottom">
                    <h6 style="color: white;">当月</h6>
                    <dxkb2 style="height: 90%;"></dxkb2>
                  </div>
                </div>
                <div class="rightcj">
                  <div><button type="button" class="btn btn-primary"   @click="jumpsx()" >
                    三相车间
                  </button></div>
                  <div class="tabletop">
                    <h6 style="color: white;">近7天</h6>
                    <sxkb style="height: 90%;"></sxkb>
                  </div>
                  <div class="tablebottom">
                    <h6 style="color: white;">当月</h6>
                    <sxkb2 style="height:90%;"></sxkb2>
                  </div>
                </div>
              </div>
            
          </div>

下面的单相车间和三相车间两个button无法点击，换成router-link也无法点击，鼠标都不能变成手

Answer 1

以下内容由CHATGPT及阿里嘎多学长共同生成、有用望采纳：

---

根据您提供的代码和描述，按钮无法点击的问题可能由以下几个原因引起：

1. CSS样式问题：在您的代码中，单相车间的按钮有一个style="pointer-events: none;"，这意味着该按钮不会响应任何鼠标事件。如果您希望按钮可点击，应该移除这个样式。

2. Vue组件问题：如果<smtkb>、<smtkb2>、<mkkb>、<mkkb2>、<dxkb>、<dxkb2>、<sxkb>、<sxkb2>这些组件内部有阻止事件冒泡的逻辑，也可能导致按钮无法点击。

3. Vue路由问题：如果使用router-link无法点击，可能是路由配置或router-link的使用方式有误。

为了解决这个问题，您可以尝试以下步骤：

解决步骤：

1. 移除pointer-events: none;样式：

   • 从单相车间的按钮中移除pointer-events: none;样式，使其可以响应鼠标事件。

2. 检查Vue组件：

   • 确保上述组件内部没有阻止事件冒泡的逻辑，如stopPropagation的使用。

3. 正确使用router-link：

   • 如果您希望使用router-link进行导航，需要确保您的Vue Router配置正确，并且router-link的使用方式正确。例如：

     <router-link :to="{path:'/cxhzkb', query:{WorkShop:'SMT'}}" class="btn btn-primary">
       SMT车间
     </router-link>
     

   • 请注意，router-link内部不需要使用button标签，它本身就是一个可点击的链接。

4. 检查Vue Router配置：

   • 确保您的Vue Router配置正确，路径和查询参数都能正确解析。

5. 调试和测试：

   • 使用浏览器的开发者工具进行调试，检查是否有JavaScript错误或控制台警告。
   • 测试移除pointer-events: none;后按钮是否可以点击，以及router-link是否能够触发导航。

代码实现示例：

移除pointer-events: none;后，单相车间的按钮代码应该如下所示：

<div>
  <button type="button" class="btn btn-primary" @click="jumpdx()">
    单相车间
  </button>
  <!-- ...其他代码... -->
</div>

如果需要使用router-link，可以这样写：

<div>
  <router-link :to="{path:'/cxhzkb', query:{WorkShop:'DX'}}" class="btn btn-primary">
    单相车间
  </router-link>
  <!-- ...其他代码... -->
</div>

参考资料：

• Vue.js官方文档：https://vuejs.org/v2/guide/
• Vue Router官方文档：https://router.vuejs.org/

通过上述步骤，您应该能够解决按钮无法点击的问题，并确保router-link能够正常工作。如果问题仍然存在，请提供更多的上下文或错误信息，以便进一步诊断问题。