Vue-数据修改提交后，导航栏数据更新

最近项目遇到一个问题，简述如下：
权限设置，提交修改角色拥有的功能模块后返回至角色管理页面，导航栏内的模块信息不随之修改。比如：将子管理员角色拥有的模块删除“系统配置”里的“功能管理”模块后返回角色管理页面，依然能在导航栏中看到“功能管理”模块，如下：

解决办法：
使用provide，inject方法刷新导航栏

1. 在App.vue中添加一下代码

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>  
  </div>
</template>
<script>
export default {
    name: "App",
    provide(){
      return{
        reload:this.reload
      }
    },
    data() {
      return {
        isRouterAlive: true,
      };
    },
    methods: {
      reload(){
          this.isRouterAlive = false,
          this.$nextTick(function(){
            this.isRouterAlive = true;
          })
      }
    }
};
</script>

2. 在角色管理页面添加

首先在export defaults 下添加

inject:['reload'],

然后添加beforeRouteEnter，在路由进入页面时调用this.reload()刷新页面
当路由数据里带有roleFun则表示从“修改角色管理页面”传入的，则刷新页面

 beforeRouteEnter(to,from,next){
			next(vm => {
				if(vm.$route.meta.child=="roleFun"){
					vm.reload();
				}
			})
		},

3. 在修改角色管理页面添加
   添加beforeRouteLeave，路由离开页面是传入一个check数据，表示从“修改角色管理页面”离开

beforeRouteLeave(to, from, next) {
        // 导航离开该组件的对应路由时调用
            to.meta.child ="roleFun";
            next();
        },

比较麻烦的写法，希望大佬指正。谢谢