The method of implementing page refresh and partial refresh in vue
1. Full page refresh
<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>
The key points are shown in the figure below:
2. Go to the page that needs to be refreshed and use inject to import and refer to reload:
3. Just call this.reload() in the method that needs to be called
2. Partial refresh
1. Define a variable isRresh and bind the variable to the label that needs to be refreshed:
2. Define the method update for partial refresh:
3. Call in the method that needs to perform partial refresh