When we are working on a project, we need to refresh the current page to achieve the purpose of data update. Here we have summarized several commonly used methods of page refresh.
(), is a method provided by native JS. this.$(0): is a method in vue routing. Both methods can achieve the purpose of page refresh. It is simple and crude, but the user experience is not good. It is equivalent to pressing F5 to refresh the page, and there will be a short white screen, which is equivalent to reloading the page.
2. Refresh through the routing method. The specific idea is to click the button to jump to a blank page, and then jump back immediately:
Current page:
<template>
<div>
<el-button type="primary" class="btn" @click="btnaction">Press me to refresh the page</el-button>
</div>
</template>
<script>
export default{
data(){
return{
}
},
mounted(){
},
methods:{
btnaction() {
// ()
// this.$(0)
this.$({
path:'/empty',
name:'empty'
})
}
}
}
</script>
Blank page:
<template>
<h1>
Empty page
</h1>
</template>
<script>
export default{
data() {
return{
}
},
created(){
this.$({
path:'/',
name:'father'
})
}
}
</script>
When clicking the button, there will be a quick address switching process in the address bar.
3. Control the display of <router-view></router-view>, register a method in the global component, which controls the display of router-view, and can be called in the child component:
<template>
<div >
<router-view v-if="isRouterAlive"></router-view>
</div>
</template>
<script>
export default {
name: 'App',
provide() { // Register a method return {
reload:
}
},
data() {
return {
isRouterAlive: true
}
},
methods: {
reload() {
= false
this.$nextTick(function() {
= true
('reload')
})
}
}
}
</script>
Current Component:
<template>
<div>
<el-button type="primary" class="btn" @click="btnaction">Press me to refresh the page</el-button>
</div>
</template>
<script>
export default{
inject: ['reload'], // Introduce method data(){
return{
}
},
components:{
},
mounted(){
},
methods:{
btnaction() {
// ()
// this.$(0)
// this.$({
// path:'/empty',
// name:'empty'
// })
() // Call method }
}
}
</script>
All pages are re-rendered when the button is clicked.
4. How to refresh the table after list operation:
When we operate the data table, we will add, delete, modify and check the table. After doing the operation, we need to refresh the list to achieve re-rendering. However, if there is a paging, we will delete it on page 3, for example. If we follow the previous refresh method, we will enter the first page after refreshing. This is definitely not what we want. At this time, our common method is to call the data rendering method again. Usually, we will have a data access interface, a delete interface, etc. When the page is loaded, we will call the method of obtaining data. When we perform the delete operation, we can call the method of obtaining data again.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.