Problem description:
When doing menu permissions, the router.addRoutes() method is used to dynamically add the routing tables obtained with different permissions to the routing. The menu is displayed normally. After clicking the menu to jump, the browser refreshes, the page does not jump to the 404 page, but becomes blank.
The cause of the problem:
addRoutes is the same as vuex, the data will be lost after the browser is refreshed, because Vue will be re-instantiated when the page is refreshed, and the route will be restored to the original route.
Solution:
After the page is refreshed, you can retrieve the routing table modified by permission, and then use the router.addRoutes() method to dynamically add the new routing table to the routing.
Method 1: Execute router.addRoutes() in the created life cycle of the App.vue file.
Method 2: Use the data loss feature of vuex page refresh, in the routing guard, judge whether the length of the routing table array stored by vuex is 0, and if it is 0, it indicates that there is currently a page refresh operation. At this time, retrieve the authorized routing table from localStorage, and then execute the router.addRoutes() operation. (This method is provided by a colleague)
If there are other methods, please leave a message to exchange! ! !