Vue refreshes the current page (no flash)
No splash screen appears when vUE refreshes the current page
parent-child component values can also be passed after the parent component completes all operations without having to go to the child component </h6 b> 1. Add the v-if attribute
to app.vue
<router-view v-if="isRouterAlive"></router-view>
2. Add isRouterAlive in the data, of course, this property name can be defined by itself, the default value is true
data () {
return {
isRouterAlive: true
}
}
3. Methods add a refresh method
methods: {
reload () {
this.isRouterAlive = false
this.$nextTick(function() {
this.isRouterAlive = true
})
}
}
4. Finally, we need to provide this function (the same as data) </h6 b>
provide () {
return {
reload: this.reload
}
}
So, that’s all set up on app.vue,
and then when we need to refresh, we just add this function to the page that we need
5. First inject this function
inject: ['reload'] (same to data)
6. Then refer to it where you need this function
refresh () {
this.reload()
}
This will refresh the page without the white screen
Read More:
- Full screen scrolling by Vue + Vue awesomeswiper
- How to open a page in a new window by Vue router
- Vue Error: Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location
- [Solved] Vue console error: navigationduplicated: avoided redundant navigation to current location
- [Solved] Vue route jumps to the same page many times error: Navigationduplicated
- [Solved] Vue Error: Avoided redundant navigation to current location:/xxxx
- Vue elementui: solution for error: avoided redundant navigation to current location: “/xxx”
- Vue: How to Solve error avoided redundant navigation to current location: “/xxx”
- Vue a page is mounted to send multiple requests at the same time, and the loading is processed uniformly
- NPM run dev runs the Vue project and reports an error: Node Sass does not yet support your current environment
- [Solved] Vue Project Modify Page Error: CALL_AND_RETRY_LAST Allocation failed – JavaScript heap out of memory
- [Solved] Vue Project Error: error ‘v-model‘ directives require no argument vue/valid-v-model
- Vue warn]: vue3 element Component emit Pass Event Error
- [Solved] Vue Project startup error: no eslint configuration found
- [Solved] vue3vite Error: Failed to resolve import “@vue/server-renderer from “src\App.vue“. Does the file exist
- VueUncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/
- vue3 import Error: has no default export [How to Solve]
- How to Solve VUE Error: Avoid mutating a prop directly since the value will be overwritten …
- [Solved] Uncaught (in promise) Error: Avoided redundant navigation to current location:
- [Solved] Vue Route Error: Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_42__.defineComponent) is not a function