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,如果能够帮助到大家的话,欢迎点星点赞哦?

你可能感兴趣的:(vue相关)