1. To implement dynamic routing, you only need to specify all routing tables first, as follows
const routes=[
{path:'/login',component:login},/*Log in*/
{path:'/home',component:home},/*front page*/
{path:'/monitor',component:monitor},/*Real-time monitoring*/
{path: "/orderQuery", component: orderQuery},/*Electronic Fence*/
{path: "/fenceSet", component: fenceSet},/*Electronic Fence*/
{path:'/orderCenter',component:orderCenter},/*Order Center*/
{path:'/carctlExamine',component:carctlExamine},/*Car Manager Approval*/
{path:'/partExamine',component:partExamine},/* Department leader approval*/
{path:'/vpExamine',component:vpExamine},/*Deputy General Approval*/
{path:'/distribute',component:distribute},/*Scheduling orders*/
{path:'/receipt',component:receipt},/*receipt*/
{path:'/trajectory',component:trajectory},/*Trail playback*/
{path:'/statistics',component:statistics },/*statistics*/
{path:'/car',component:car},/*Vehicle Management*/
{path:'/user',component:user},/*User Management*/
{path:'/equipment',component:equipment},/*Equipment Management*/
{path:'/group',component:group},/*Team Maintenance*/
{path:'/driver',component:driver},/*Driving Management*/
{path: '/company', component: company},/*Company Management*/
{path: '/adminManage', component: adminManage},/*Company Member Management*/
{path: '/roleManage', component: roleManage},/*Role Management*/
{path:'/systemDaily',component:systemDaily },/*System Log*/
];
2. Send the front-end routing table to the backend and backend negotiation data form. In the following, use "el=menu" to loop out the backend route table as follows
<el-menu
:default-active="$"
class="el-menu-demo"
mode="horizontal"
@select="handleSelect"
background-color="#545c64"
text-color="#fff"
active-text-color="#85ffca">
<el-menu-item :index="" v-for="item in pathList"
v-if="!=null" :key="" >
<router-link :to="">{{}}</router-link>
</el-menu-item>/*Level 1 Navigation*/
<el-submenu v-if="==null" :key="":index="" v-for="item in pathList">
<template slot="title">{{}}</template>
<el-menu-item v-for="child in " :index=""
:key="" v-if="!=null" >/*Second-level navigation*/
<router-link :to="">{{}}</router-link>
</el-menu-item>
<el-submenu v-if="!=[]&&==null" v-for="child in ":key="":index="" >
<template slot="title">{{}}</template>
<el-menu-item v-for="three in ":index="":key="">/*If there is a level 3 navigation*/
<router-link :to="">{{}}</router-link>
</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
In this way, you can obtain the permissions and routing tables that the current user has based on the interface when logging in, so dynamic routing is done. We determine permissions based on the page. Without a page, it means that we cannot view the page without permission.
The above article Vue is combined with eiement dynamic routing, and the method of permission verification is all the content I share with you. I hope you can give you a reference and I hope you can support me more.