vue项目点击侧边栏刷新页面

在很多vue后台demo中都会有点击侧边栏刷新页面的需求，在很多演示中对这部分并没有太多的考虑，今天作者就对该部分的代码设计做一个介绍，首先直接上代码：

修改路由分发的部分

// 在app.vue或者具体项目中路由分发的地方引入v-if="isRouterAlive"
<template>
	<div id="app">
		<transition name="fade" mode="out-in">
			<router-view v-if="isRouterAlive"></router-view>
		</transition>
	</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>

在侧边菜单栏的代码部分添加下面的代码

// 注意该部分的handleselect方法
<el-menu :default-active="$route.path" class="el-menu-vertical-demo" 
	@select="handleselect" unique-opened router v-show="!collapsed" >
	
export default {
    inject: ['reload'],  // 注入重载的功能（注入依赖）
    methods: {
    	handleselect: function (a, b) {
		    this.reload()  // 点击侧边栏重新载入页面
		},
    }
}    

完成上面的步骤后，你的侧边栏应该已经可以点击刷新啦，作者的vue项目见：https://github.com/guodonglw/vue_admin，如果能够帮助到大家的话，欢迎点星点赞哦?