©2020-2024 ioDraw All rights reserved
<>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方法，打印输出，即实现了重复点击路由刷新
但是这种方式，在主页首次点击的时候，会重复点击两次，就相当于在页面中调用两次接口