Vue + el-menu刷新选中 + 路由监听 + 路由重复点击

Posted 2021-09-26 做猪呢，最重要的是开森啦

0. 整体代码：

 【App.vue】

<template>
  <div id="app">
    <HeaderPage :routerData="routerData"/>
    <br>
    <router-view v-if="isRouterAlice"/>
  </div>
</template>

<script>
import HeaderPage from './components/Header.vue'

export default {
  name: 'App',
  components: {
    HeaderPage
  },
  provide () {
    return {
      reload: this.reload
    }
  },
  methods: {
    reload () {
      this.isRouterAlice = false
      this.$nextTick(function () {
        this.isRouterAlice = true
      })
    }
  },
  data: function () {
    return {
      isRouterAlice: true,
      routerData: [
        {
          index: 0,
          title: '汇总',
          route: '/summarization'
        },
        {
          index: 1,
          title: '管理',
          route: '/management'
        },
        {
          index: 2,
          title: 'TestOne',
          route: '/testone'
        },
      ]
    }
  }
}
</script>

 【HeaderPage.vue】

<template>
  <div class="hello">
<!--    <ul>-->
<!--      <router-link v-for="(item,index) in routerData" :key="index" :to="{path:item.route}" @click.native="flushRouter">{{item.title}}&emsp;</router-link>-->
<!--    </ul>-->
    <el-menu class="el-menu--popup" :default-active="defaultActive" router>
      <el-menu-item v-for="(item,index) in routerData" :key="index" :index="item.route" @click.native="flushRouter">{{item.title}}</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'HeaderPage',
  inject: ['reload'],
  props: {
    routerData: Array
  },
  data:function(){
    return {
      defaultActive : ''
    }
  },
  methods: {
    flushRouter () {
      this.reload()
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(to) {
        if (to.fullPath.endsWith('testone'))
        this.defaultActive = to.path // 给defaultActive重新赋值为当前组件的路由地址
      }
    }
  }
}
</script>

 【整体效果】：

1. el-menu刷新选中：

 el-menu菜单，在刷新时选中当前的菜单，，通过路由监听实现

 【要点】：

• el-menu标签中绑定defaultActive属性，如:default-active=“defaultActive”
• vue实例中watch监听路由，刷新时，路由地址发生变化，就能被监听到，然后赋值给defaultActive，实现刷新再选中

 watch: {
   $route: {
     immediate: true,
     handler(to) {
       if (to.fullPath.endsWith('testone'))
       this.defaultActive = to.path // 给defaultActive重新赋值为当前组件的路由地址
     }
   }
 }

 【效果】：

 如本栗子，汇总页刷新，菜单的高亮消失了；到TestOne菜单刷新时，会再选中TestOne，依旧高亮

2. 路由重复点击：

 路由重复点击，默认是不刷新对应路由页面的，要实现路由重复点击刷新，可以采用Provide + inject 来实现

 【要点】：

• 路由渲染组件标签< router-view > 绑定一变量控制显示，如< router-view v-if=“isRouterAlice”/>
• 路由渲染组件标签所在组件(本栗子的App.vue)提供暴露一个reload方法，该方法改变isRouterAlice值，让路由不显示，然后再次渲染后又显示回来
• 在路由标签绑定一个native的点击事件，如@click.native=“flushRouter”
• 在路由标签所在组件(本栗子的HeaderPage.vue)中inject暴露的reload方法，如inject: [‘reload’],，flushRouter方法中调用reload方法
• 路由标签是像原生的< router-link > ,或者是本栗通过el绑定实现的

 【整体效果】：

 重复点击TestOne，每点击一次，都触发create方法，打印输出，即实现了重复点击路由刷新

 但是这种方式，在主页首次点击的时候，会重复点击两次，就相当于在页面中调用两次接口