Vue連續點擊菜單刷新當前頁面

 

1.跳轉代碼

                <template v-for="(kid,index) in child.children" v-if="!kid.hidden">
                  <div :key="kid.name" @click="RoutLink(child,kid,index)">
                    <el-menu-item :index="kid.path" :class="kid">
                      <i class="dise" >●</i>
                      <span v-if="kid.meta&&kid.meta.title">{{ kid.meta.title }}</span>
                    </el-menu-item>
                  </div>
                </template>

 

2，事件代碼，我是路徑后面加的時間戳，注：在根據路徑渲染的文件'"<router-view :key="key"/>",我的項目在AppMain.vue里面如下圖：

<template>
  <div>
    <!-- <transition name="fade-transform" mode="out-in"> -->
    <transition name="el-fade-in-linear">
      <router-view :key="key"/>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    key() {
      return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
    }
  }
}
</script>

<style scoped>
</style>

 

 RoutLink(child, kid, index) {
      const router = this.routes.path + '/' + this.menus.path + '/' + child.path + '/' + kid.path
      this.$router.replace({
        path: router,
        query: {
          t: +new Date() // 保證每次點擊路由的query項都是不一樣的，確保會重新刷新view
        }
      })
    },