https://www.php.cn/js-tutorial-397246.html
demand
Recently took over a background management system, which needs to achieve the effect of pulling the navigation menu from the background; the navigation menus pulled out respectively are different according to the permissions of the logged-in user, and there are also differences in the operational interface.
problem
Because the background management system is ready to use the combination of vue + vue-router + element-ui + vuex, but the single-page application has instantiated and injected vue-router into the vue instance before entering the page, so enter There is no way to re-customize the route when logging in to the page. Next, all kinds of Baiguo found that vue-router provided the addRoutes method in version 2.0 to add routes, and the dawn of hope appeared.
After a lot of tossing, I finally realized the function. It is recorded for easy review, and I hope to help comrades who also have needs.
Ideas
1. First configure a fixed routing address locally, such as login, 404 pages, as follows:
After these fixed routes are configured, we can only go to the login page, otherwise we can not continue.
2. Then an important step, we need to agree with the back-end old iron about the permission menu list information that needs to be returned; first of all, here we analyze the routing structure we need, and here take my own routing as an example. If I define the route directly by myself, it will be the following structure:
According to the above structural analysis, the routes that really need to be dynamically configured are actually the children part under / layout, so the backend needs to return to us an array containing all routes. The
returned data is the list of first-level navigation in the rootList. The first-level navigation does not actually have a routing function, but only serves as a trigger for switching the second-level menu. SubList is the routing information we really need.
3. After getting the permission routing information, we need to process the data locally and assemble it into the data we need:
the method of processing the menu list and subList: mergeSubInRoot and mergeRoutes. So
far we have successfully configured the permission routing into the local route, mine Log into the system as
subsequent optimization
1. The display of the menu list and the switching of the secondary navigation:
2. Prevent the refresh route from being lost; because the single-page application will be re-initialized when refreshing, all the configured routes will be lost at this time. Once back to liberation, only the local configuration Route can jump. At this time, we can execute the following code in app.vue (ps: no matter where it is refreshed, app.vue will execute):
so that even if it is refreshed, the route will be reconfigured.
3. About page button level control, you can customize an instruction to do this. Because we have put the permission list into the meta object of the corresponding route, we can easily go back to the permissions that the current user has on the current page on each page.
Refer to the official documentation for custom instructions
Conclusion
After finishing work, it is due to the method of addRoutes added in vue-router2, otherwise
I believe that you have mastered the method after reading the case of this article. For more exciting, please pay attention to other related articles on php Chinese network!
Recommended reading:
PHP generates a random string with a custom length
php picture cropping and thumbnail use examples to explain
The above is the detailed content of vue addRoutes to realize the dynamic permission routing menu steps. For more details, please pay attention to other related articles on php Chinese network!
Link to this article: h ttps: //www.php.cn/js-tutorial-397246.html
