Here the main record of three methods, respectively: forced refresh, forged refresh, no trace refresh.

Strong refresh:

This.$router.go(0) this.$router.go(val) => step forward or step backward in the history record. Refreshes the current page when val is 0.Copy the code

These two methods can achieve the purpose of page refresh, simple and crude, but the user experience is not good, equivalent to pressing F5 to refresh the page, page reload, there will be a brief blank screen.

Non-trace refresh

Vue traceless refresh

Register a method in the global component to control whether the router-view is displayed or not, and call it in the child component.

Display controlled by V-IF.

Provide: global registration method;

Inject: methods registered by child component references provide;

App. Vue:

Current component:

When the button is clicked all pages are rendered again, without a brief blank space, and the life cycle of each component is executed again.

Js traceless refresh

PushState removes arguments from the path and adds a history that can be rolled back to the previous address with arguments. With replaceState, previous records are not saved. The component lifecycle of the page is not called again.

export const removeUrlParam = () => { var url = window.location.href var valiable = url.split('? ')[0] // unavailable ({}, 0, valiable)}Copy the code