Vue 配合eiement動態路由,權限驗證的方法

1.要實現動態路由，只須要在main.js中將全部路由表先規定好，以下

前端精品教程：百度網盤下載

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

const routes=[   {path: '/login' ,component:login}, /*登陸*/      {path: '/home' ,component:home}, /*首頁*/   {path: '/monitor' ,component:monitor}, /*實時監控*/   {path: "/orderQuery" , component: orderQuery}, /*電子圍欄*/   {path: "/fenceSet" , component: fenceSet}, /*電子圍欄*/      {path: '/orderCenter' ,component:orderCenter}, /*訂單中心*/   {path: '/carctlExamine' ,component:carctlExamine}, /*車管員審批*/   {path: '/partExamine' ,component:partExamine}, /*部門領導審批*/   {path: '/vpExamine' ,component:vpExamine}, /*副總審批*/      {path: '/distribute' ,component:distribute}, /*調度派單*/   {path: '/receipt' ,component:receipt}, /*回執*/      {path: '/trajectory' ,component:trajectory}, /*軌跡回放*/   {path: '/statistics' ,component:statistics }, /*統計*/      {path: '/car' ,component:car}, /*車輛管理*/   {path: '/user' ,component:user}, /*用戶管理*/   {path: '/equipment' ,component:equipment}, /*設備管理*/   {path: '/group' ,component:group}, /*小組維護*/   {path: '/driver' ,component:driver}, /*駕駛員管理*/      {path: '/company' , component: company}, /*公司管理*/   {path: '/adminManage' , component: adminManage}, /*公司員管理*/   {path: '/roleManage' , component: roleManage}, /*角色管理*/   {path: '/systemDaily' ,component:systemDaily }, /*系統日誌*/          ];

2.把前端路由表發給後臺和後臺協商返回的數據形式，在app.vue中，使用《el=menu》循環出來後臺返回的路由表以下

前端精品教程：百度網盤下載

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<el-menu   : default -active= "$route.path"   class= "el-menu-demo"   mode= "horizontal"   @select= "handleSelect"   background-color= "#545c64"   text-color= "#fff"   active-text-color= "#85ffca" >     <el-menu-item :index= "item.path" v- for = "item in pathList"       v- if = "item.path!=null" :key= "item.id" >   <router-link :to= "item.path" >{{item.name}}</router-link>   </el-menu-item> /*一級導航*/     <el-submenu v- if = "item.path==null" :key= "item.id" :index= "item.name" v- for = "item in pathList" >   <template slot= "title" >{{item.name}}</template>     <el-menu-item v- for = "child in item.children" :index= "child.path"    :key= "child.id" v- if = "child.path!=null" > /*二級導航*/    <router-link :to= "child.path" >{{child.name}}</router-link>     </el-menu-item>   <el-submenu v- if = "child.children!=[]&&child.path==null" v- for = "child in item.children" :key= "child.id" :index= "child.name" >    <template slot= "title" >{{child.name}}</template>    <el-menu-item v- for = "three in child.children" :index= "three.path" :key= "three.id" > /*若存在三級導航*/    <router-link :to= "three.path" >{{three.name}}</router-link>    </el-menu-item>   </el-submenu>     </el-submenu>   </el-menu>

這樣就能夠在登陸的時候根據接口獲取到當前用戶所擁有的權限以及路由表，這樣動態路由就作好了 。咱們是根據頁面來肯定權限的，沒有頁面就表明沒有權限沒法查看頁面。