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

Posted 做猪呢,最重要的是开森啦

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue + el-menu刷新选中 + 路由监听 + 路由重复点击相关的知识,希望对你有一定的参考价值。

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方法,打印输出,即实现了重复点击路由刷新

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

以上是关于Vue + el-menu刷新选中 + 路由监听 + 路由重复点击的主要内容,如果未能解决你的问题,请参考以下文章

vue实战:路由监听

Vue Element 导航子路由不选中问题

el-menu刷新页面时,当前激活菜单的高亮问题

elementui导航栏刷新选中问题

vue Element动态设置el-menu导航当前选中项

解决element-ui el-menu跳转,导航不高亮或没有选中问题