How does Vue refresh the page

This article mainly introduces the relevant knowledge of "Vue how to refresh the page", the editor shows you the operation process through the actual case, the operation method is simple and fast, practical, I hope this "Vue how to refresh the page" article can help you solve the problem.

When we are writing a project, we often encounter that the user needs to refresh the page to re-render the page after performing an action and changing some state. Such as: user login success, add, delete, update and so on.

Original method:

Location.reload ()

Route redirection that comes with vue:

This.$router.go (0)

People who have used it all know that the first two are forced to refresh the page, there will be a brief flicker, the user experience is not good.

So, we choose the third way:

First, write the following code in App:

Export default {name: 'App', provide () {/ / provides variables in the parent component through provide, and injects variables in the child component through inject. Return {reload: this.reload}}, data () {return {isRouterAlive: true / / variables that control whether the view is displayed}} Methods: {reload () {this.isRouterAlive = false / / close first, this.$nextTick (function () {this.isRouterAlive = true; / / reopen})}},}

Next, we can write this in the component that needs to refresh the page:

Export default {inject: ['reload'], / / inject the reload method data () {return {. }}, this is the end of the content about "how to refresh the page with Vue". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.