1. First confirm whether you use the route guard and () in , prompting the page to refresh each time, and regenerate dynamic routes based on the backend data, just like what you do when logging in.
Notes on code demonstration:
//Note: Make sure you avoided the route guard entering the dead looplet oneRun = true; //Control through oneRun variable to avoid falling into a dead loop((to,from,next)=>{
if(oneRun){
oneRun = false;// Must be executed in creatNewRouter() createNewRouter();
next({...to, replace: true})// It is essential to ensure that your dynamic route is created successfully before executing other codes }
})
function createNewRouter(){
//Please do what you did after logging in and create dynamic routes exactly the same thing. //Do not use cache, session or localstorage, otherwise an error will be reported. You need to reissue the request. How to log in? Here is how to do it.};
2. If you find that the refresh has been successful but the fallback has problems, please switch the routing mode to history vue-route. The default hash mode is used. That is, blinking appears on the address /#/ Of course, there is no problem with the running of the main body of the history mode. After the packet is sent, the backend configuration is required.Backend configuration guidance linkJust copy the link and send it to the backend classmates.
3. If you want to know more
1. Why does it fail if you use cache? This is because when you use this thing when you save it in the cache, it will change the component object and make it lose a render function. Here you can print out the routes you cache and then parse after comparing them. AddRouters() requires that the array parameters it accepts must strictly comply with the routing rules.
({...to, replace: true}) Why is it essential? In hash mode, your dynamic route may not be created yet, and you will run other codes. After all, the route guard is an asynchronous operation. In history mode, there may be no problem. It is not tested. It is best to write.
3. Is it inappropriate to get the route every time I refresh and send a request?
Continue to cache, but after the route is retrieved from the cache, rewrite all the component objects in the route. There are many ways to rewrite, such as recursive traversing the route. Then = vueName; vueName is the vue file variable you exported.
Supplementary knowledge:VUE dynamically injects the routing white screen, and the page problem will be displayed only after refreshing again.
Problem description:
Since the system needs to dynamically inject routes, the routes are dynamically obtained based on account permissions in routing interception, and then injected into the local route. The code is as follows:
// Try to get permission fields in the local store user informationconst hasRoles = && > 0
if (hasRoles) {
next()
} else {
try {
// Exchange token for user information ('user/getInfo').then(roles => {
if (!roles) new Error('roles error!')
// Map the corresponding routing information based on the obtained user permissions
('permission/generateRoutes', roles).then(accessRoutes => {
if (!accessRoutes) new Error('accessRoutes error!')
// Dynamically join the routing
(accessRoutes)
// Ensure route integrity and set replace to true so that the navigation will not leave a history.
next({
...to,
replace: true
})
}) })
} catch (error) {
// Delete the local token and log in again await ('user/resetToken')
(error || 'Has Error')
next(`/login?redirect=${}`)
()
}
}
This way, only after refreshing the page after logging in will it be dynamically injected. The solution is to execute the red font part code after logging in.
The above article is based on the vue dynamic menu and the solution to refresh the blank problem is all the content I share with you. I hope you can give you a reference and I hope you can support me more.