vue selective refresh components & how elegant refresh the page

In developing the project, and sometimes modify the background data changes may not be up to date on the page, then we need to refresh the page to update the data, but a direct call to refresh window.location.reload () operation is not likely to experience very well, so we need the following method.

Cited a scene, such as modifying the contents of the main content, I want to refresh the main part of the component, but does not refresh title aside and components, how to achieve it?

One way to achieve this is encapsulated in the components that you want to refresh, when the need to refresh the page directly call this method can no traces refresh this component (page)!

Code:

1, the packaging method in app.vue, flush the entire system can be called at this point (full page)

<template>
	<div class="app-file">
		<router-view v-if="isRouterAlive"></router-view>
	</div>
</template>

<script>
export default {
	provide() {
		return {
			reloadAll: this.reloadAll
		}
	},
	data() {
		return {
			isRouterAlive: true
		}
	},
	methods: {
		reloadAll() {
			this.isRouterAlive = false
			this.$nextTick(() => {
				this.isRouterAlive = true
			})
		}
	}
}
</script>

<style lang="scss" scoped>
</style>

2, the second part, referenced components that you want to achieve and call refresh method

 

 3, so that the call can achieve the effect we want, the same way, can also be applied to other components, such as those listed at the beginning of the scene:

 

 This can be achieved refresh head, side navigation or the main content of the selective!