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}} </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刷新选中 + 路由监听 + 路由重复点击的主要内容,如果未能解决你的问题,请参考以下文章