Vue 刷新当前路由

主要方法 通过 capture 使事件变为捕获事件, 先于router-link的地址跳转发生

 	<div
      v-for="menu in menuData"
      :key="menu.code"
      :data-code="menu.code"
      :class="{active:menu.active}"
      class="menu-item menu-child"
      @click.capture="navMenuItem"
    >
      <router-link
        :to="menu.url"
        class="nav-item"
        :replace="true"
      >
        {{ menu.name }}
      </router-link>
    </div>

  import Vue from "vue"
  import Component from "vue-class-component"
  @Component
  export default class Menu extends Vue {
     menuData: menuItem[] = [];
     private preUrl = ""
     navMenuItem (e:MouseEvent & {currentTarget:HTMLDivElement}):void {
       const dom = e.currentTarget
       const code = dom.dataset.code
       let newUrl = ""
       this.menuData.forEach(val => {
             if (node.code === code) {
               node.active = true
               newUrl = "/" + node.url
             } else {
               node.active = false
             }
         return val
       })
       if (newUrl === this.preUrl) {
         this.$router.push("/noexist") // 给空白的或不存在的地址
       }
       this.preUrl = newUrl
     }
  }

• 给菜单组件加一个变量缓存上一次点击的路径 preUrl,，
• 给导航的子菜单加一个捕获事件@click.capure，
• ** 每次点击时比较是不是同一个，是同一个的话，就随便给个路径 ,因为捕获事件是先于 router-link的跳转，所以最后还是会走 router-link上的地址，而且中间经过一个别的路径，所以会重新刷新 **