The click event of the page written by the vue framework is invalid

the structure of the page is as follows: was it button failure before or did I replace it with span or failure? I tried to use span. Native didn"t work. I really asked for advice, but I was powerless.

<template>
  <div class="index">
    <div class="top">
        <mt-swipe :auto="2000" v-if="ImgList!=""">
          <mt-swipe-item v-for="(v,k) in ImgList" :key="k">
            <img :src="v.adPicture">
            <!-- <img v-if="v.adUrl==""" :src="v.adPicture">
            <a v-if="v.adUrl!=""" :href="v.adUrl"><img :src="v.adPicture"></a> -->
          </mt-swipe-item>
        </mt-swipe>
    </div>
    <div class="button">
      <span @click="turn_to("/order","order")"></span>
      <span @click="skip_to("/myCode","myCode")"></span>
      <span @click="skip_to("/yzPost","yzPost")"></span>
      <span @click="skip_to("index","index")"></span>
      <span @click="turn_to("/cityPost","cityPost")"></span>
      <span @click="skip_to("/my","my")"></span>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
import wx from "weixin-js-sdk";
import base from "../assets/js/base";
var Cookies = require("js-Cookie");
let hex_md5 = require("crypto-js/md5");
export default {
  name: "index",
  data() {
    return {
      ImgList: []
    };
  },

  methods: {
    getData() {
      let _this = this;
      base.axios_post("", "***************", function(res) {
        if (res.code == 0) {
          _this.ImgList = res.data;
        }else if(data.code==100){
          Cookies.remove("p_openId");
          _this.$router.push({path: "/index"});
        } else {
          _this.$toast(res.message);
        }
      });
    },
    turn_to() {},
    skip_to(path, name) {
      let ptoken = Cookies.get("ptoken");
      let pstate = Cookies.get("pstate");
      if (ptoken!=undefined) {
        if (name == "index") {
          this.sys();
        } else {
          this.$router.push({ path: path });
        }
      } else {
        if (pstate == 0) {
          this.$router.push({ path: "/proof", query: { type: name } });
        } else if (!pstate) {
          this.$router.push({ path: "/register", query: { type: name } });
        }
      }
   },
Mar.02,2021

according to the literal amount of your code, I think your click event was written incorrectly. Try to write it this way:

//
skip_to(toPath, name) {
    this.$router.push({ path: toPath, query: { type: name } });
}
< hr >

add
try this:

<div class="button">

  <span @click="turn_to('order')"></span>
  <span @click="skip_to('myCode')"></span>
  <span @click="skip_to('yzPost')"></span>
  <span @click="skip_to('index')"></span>
  <span @click="turn_to('cityPost')"></span>
  <span @click="skip_to('my')"></span>
</div>

methods: {
    skip_to(arg) {
        this.$router.push({ path: "/" + arg, query: { type: arg } });
    }
}
< hr >
I hope my answer will be helpful to you!

minimize the code to a Demo.html file and put it on, so that the code is incomplete and you can't see the problem


Code

first
skip_to(path, name) {
    this.$router.push({ path: path, query: { type: name } });   //path 
}

whether the second event of yours is not triggered or whether it is a code problem, alert is the most intuitive

.

first check whether your routing address has changed


see if your console has reported any errors. You can comment out other code in the skip_to method, try simply console, and see how the console prints


if the click event does not take effect. See if there is a transparent layer on top of your button and add cursor:pointer style to see


<div class="button">
  <span @click.native="turn_to('order')"></span>
  <span @click.native="skip_to('myCode')"></span>
  <span @click.native="skip_to('yzPost')"></span>
  <span @click.native="skip_to('index')"></span>
  <span @click.native="turn_to('cityPost')"></span>
  <span @click.native="skip_to('my')"></span>
</div>

try adding native to click

Menu