Project background
Initialize page-related operations in the main file,
Put user permission judgment in mounted and update the permission value in the store. When clicking on the corresponding component, mounted can work normally.
However, when the user refreshes manually, the function in mounted is not executed, resulting in the corresponding component not obtaining permissions and displaying an exception
Problem solving
First of all, this is related to the vue life cycle, so I won’t post the picture, just talk about the reason.
When the user f5 refreshes the page, the entire page will be requested again, and the status variable of js disappears, but the el node is not re-established.
Because mounted is the hook called after el is replaced by the newly created vm.$el and is mounted on the instance. el is not remounted here, so the hook function will not be called.
Here, the method of judging user permissions can be written in beforeMount or created according to the actual situation
Common hook trigger events
beforeCreate
After instance initialization, the data observer and event/watcher event configuration are called before. Neither data nor instances are accessible
created
The instance is called after it has been created. In this step, the instance has completed the following configuration: data observation (data observer), properties and methods operations, and watch/event event callback. However, the mount phase has not begun and the $el attribute is currently invisible.
Data is accessible, instances are not accessible
beforeMount
Called before the mount starts: The related render function is called for the first time.
Before DOM is mounted, data can be accessed, instance $el is a virtual DOM node, it is not accessible, and the data has not been inserted into the DOM yet.
mounted
el is replaced by the newly created , and then mounted to the instance and called the hook. At this time, el is replaced, and the hook is called after mounting it to the instance. At this time, el is replaced, and the hook is called after mounting it to the instance. At this time, el is the real DOM element
beforeUpdate
Called when data is updated, happening before virtual DOM is rerendered and patched. You can change the state further in this hook, which does not trigger the additional re-rendering process.
updated
After the data is updated.
The virtual DOM re-renders and patches due to data changes, and the hook is called after this.
When this hook is called, the component DOM has been updated, so you can now perform operations that depend on the DOM. However, in most cases you should avoid changing the state during this period, as this may result in an infinite loop of updates.
This hook is not called during server-side rendering.
beforeDestroy
Called before instance is destroyed. The instance can still be used
destroyed
Called after the Vue instance is destroyed. At this time, everything indicated by the Vue instance will be unbinded, all event listeners will be removed, and all sub-instances will be destroyed. This hook is not called during server-side rendering.
The above article solves the problem of not executing the function in the F5 refresh mounted in the vue project F5 is all the content I share with you. I hope you can give you a reference and I hope you can support me more.