VUE点击首页重新加载首页的一种实现

TLROJE777

于 2019-07-17 17:10:55 发布

阅读量789

点赞数

CC 4.0 BY-SA版权

分类专栏： WEBPACK/VUECLI3 JS学习历程

本文链接：https://blog.youkuaiyun.com/TLROJE787/article/details/96113928

WEBPACK/VUECLI3 同时被 2 个专栏收录

14 篇文章

订阅专栏

JS学习历程

12 篇文章

订阅专栏

本文介绍了一种Vue应用中实现首页数据重置的方法：通过动态控制router-view的显示与否来达到页面重载的效果，从而清空首页的状态，如取消按钮选中状态等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

适用于首页有一些数据需要重置的情况，比如按钮选中后，点击首页清空选中状态
实际原理是通过v-if去掉router-view然后再加载
app.vue代码如下

<template>
	<div>
		<button @click="reload">首页</button>
		<router-view v-if="isRouterAlive"></router-view>
	</div>
</template>
<script>
	export defalut{
		provied(){//可以把刷新功能注入到子组件，子组件使用inject['reload']后调用this.reload()即可
			return{
				reload:this.reload;
			}
		}
	}，
	data(){
		return{
			isRouterAlive = true;
		}
	},
	methods:{
		reload(){//刷新功能代码
			this.isRouterAlive = false;//先去掉router-view
			this.$nextTick(()=>{
				this.isRouterAlive = true;//然后重新加载router-view
			})
		}
	}