Dynamic routing is a common function. According to the ROUTING JSON table returned from the background, the front-end dynamically displays the reachable routing items. The following describes the specific implementation method:

General business requirements: Front on the login page, enter account password, click on the landing, interface return to log in successfully at the same time, also can bring the users can operate the routing list is returned to the front (JSON array format), the front-end to the JSON array, to render into the sidebar list (PC), we need to write all pages are good, Then match part of the routes returned by the background for display (for example, the project has 100 pages in total, and the background returns 10 routing addresses, so we only show the corresponding 10 returned).

Here’s the idea:

We can divide the route into three parts

1. Default display (login page, 404 page, etc.)

2. Part returned by background (part of routes with permission operation)

3. All dynamic routes (for example, the background returned 10 routing addresses, our all dynamic routes are 100 addresses, all we do is to add 100 all dynamic routes and the background returned 10 matching routes to the default route, can complete the process of dynamic routing)

For a normal route, we write something like this:

//src/router/index.js import Router from 'vue-router' Vue.use(Router) const Routes = [ { path:'/', component:Login, Meta: {title: 'login page'}}, {path:'/Home', Component :Home, meta: {title: 'login page'}}, {path:'/Home', Component :Home, meta: {title: 'Home Home '}}] const Routers = New Router({routes: routes}) export default RoutersCopy the code

If we want to do dynamic routing, we need to change the structure (divided into dynamic + static), static here means that we need to match the corresponding display, so we need to build a whole route JSON

// router/index.js const defaultRoutes = [//... Const allRouters = [// Here are all dynamic routers {path:'/UserList', Component :UserList, meta: {title: 'Personnel management'}}, {path:'/PwdList', Component :PwdList, meta: {title: 'password management'}}] const Routers = new Router({routes: DefaultRoutes // Default render -> Default routes}) export default RoutersCopy the code

All static and dynamic routes have been written, and the next step is the key part (stitching the json route returned by the background into the route). Because we jump from the login page after clicking on the login page, we write the code to the router hook (phones.beforeach function).

Routers.beforeEach((to,from,next) => { if(to.path ! = '/' &&! Store.state. isLogin) {// Jump is not the home page and the user has not logged in // this judgment, we can determine the user is doing the jump when login //↓ Let resRouterArr = [{routeName: 'People management ', children: [{routeName:' Sales management ',...}, {routeName: 'Housekeeping ', ... } ] } ] let routerArr = [] resRouterArr.forEach(item => { allRouters.forEach(all => { if(item.routeName == Parse (json.stringify (all)) let childrenRouter = [] if(item.children && item.children.length > 0) { item.children.forEach(childItem => { all.children.forEach(allItem => { if(childItem.routeName == allItem.routerName) { childrenRouter.push(allItem) } }) }) obj.children = childrenRouter } Routerarr. push(obj)}})}) Routers. Addroutes (routerArr)// Addroutes is a method for adding an array of Routers Store.mit ('domRouteTree',rousterArr)// stored in vuex, next({... To,replace:true})} else {next()}})Copy the code

In this way, we jump to the following business page, you can see the list of dynamic routes generated on the left side of the list, click several dynamic routes generated on the left side, also very nice, no problem ~

Ps: HERE encountered a pit, stepped on a while, also note

It used to be that way

import UserList from '@/views/User/UserList'
    
Copy the code

But after the jump in the past, the page will appear white screen error, check for a long time, the original to complete the path

import UserList from '@/views/User/UserList.vue'
    
Copy the code

[.vue] = [.vue] = [.vue] = [.vue] = [.vue] = [.vue] = [.vue] = [.vue] = [.vue] = [.vue] = [.vue] = [.vue] = [.vue] = [.vue] = [.vue]