发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

前端vue如何根据菜单自动生成路由(动态配置前端路由)

短暂的停留

5

主题

5

帖子

15

积分

新手上路

Rank: 1

积分
15
显示全部楼层
前言

在需要权限控制的页面，往往存在根据用户来显示菜单的情况，单独根据用户类型判断显然不是很好，如果后面用户类型发生变化，项目修改维护可能就会比较麻烦，所以比较好的做法是根据后端返回的菜单动态生成页面路由，以达到完全权限控制的目的，并且若权限发生变化，仅需该配置数据即可

1.创建项目

首先用vue-cli3创建好项目

2.新建文件

创建好项目后，新建我们需要的文件。结构如图

下载相关依赖包 ：element-ui（菜单样式用） 和 axios（获取菜单用）
  1. npm i element-ui axios --save
复制代码
3.到main.js中
  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. import elementUi from 'element-ui'
  5. import 'element-ui/lib/theme-chalk/index.css'
  6. Vue.use(elementUi)

  8. Vue.config.productionTip = false

  10. new Vue({
  11.   router,
  12.   render: h => h(App)
  13. }).$mount('#app')
复制代码
4.先把菜单组件写好，到menu.vue中

这里使用element-ui的el-menu组件
  1. <template>
  2.   <div class="menulist-inner">
  3.     <el-menu
  4.             default-active="/project"
  5.             :default-openeds="openedMenu"
  6.             background-color="rgba(44,55,71,1)"
  7.             text-color="#A7BAC6"
  8.             active-text-color="#FFFFFF"
  9.             @select="select"
  10.             unique-opened
  11.             @open="open">
  12.       <el-submenu :index="menu.path" v-for="(menu,index) in menus" :key="index">
  13.         <template #title>
  14.           <div class="menuTitlBox">
  15.             <div class="rowBtween menuTitle">
  16.               <div class="rowStart">
  17.                 <div class="iconBox" style="margin-right:10px;">
  18.                   <i v-if="/icon/.test(menu.icon)" class="iconfont" :class="menu.icon" style="
  19.                   color:#A7BAC6;font-size:16px;"></i>
  20.                   
  21.                 </div>
  22.                 <span class="font16" :class="{whiteText:(!menu.children || !menu.children.length) && new RegExp(menu.path).test($route.path)}">{{menu.label}}</span>
  23.               </div>
  24.             </div>
  25.             <div class="firstMenuBk" v-if="(!menu.children || !menu.children.length) && new RegExp(menu.path).test($route.path)"></div>
  26.           </div>
  27.         </template>
  28.         <div class="menuItemBox rowEnd"
  29.              v-for="(cMenu,cIndex) in menu.children"
  30.              :key="cIndex"
  31.              :class="{activeMenu:RegExp(cMenu.path).test($route.path)}"
  32.              @click="select(cMenu)"
  33.         >
  34.           <span class="rowStart font14">{{cMenu.label}}</span>
  35.         </div>
  36.       </el-submenu>
  37.     </el-menu>
  38.   </div>
  39. </template>

  41. <script>
  42.     import {mapState}from 'vuex'
  43.     export default {
  44.         name: "Menu",
  45.         data() {
  46.             return{
  47.                 menuMinHeight:0,//
  48.                 openedMenu:[],//展开的菜单

  50.             }
  51.         },
  52.         computed:{
  53.             ...mapState(['menus'])
  54.         },
  55.         created(){
  56.             let pathArr=this.$route.path.split('/')
  57.             this.openedMenu=[`/${pathArr[1]}`]
  58.         },
  59.         async mounted() {

  61.         },
  62.         methods: {
  63.             //中菜单
  64.             select(cMenu){
  65.                 // console.log(cMenu)
  66.                 let {routeName}=cMenu
  67.                 this.$router.push({
  68.                     name:routeName
  69.                 })
  70.             },
  71.             //菜单展开
  72.             open(index,indexPath){
  73.                 // console.log(indexPath)
  74.                 this.openedMenu=indexPath
  75.                 let menu=this.menus.filter(item=>item.path===index)
  76.                 // console.log(menu)
  77.                 let routeMenuInfo={}
  78.                 let time=0
  79.                 if(!menu[0] || !menu[0].children || !menu[0].children.length){
  80.                     routeMenuInfo=menu[0]
  81.                 }else{
  82.                     routeMenuInfo=menu[0].children[0]
  83.                     time=500
  84.                 }
  85.                 let {path,}=routeMenuInfo
  86.                 // console.log(path)
  87.                 setTimeout(()=>{
  88.                     this.$router.push(path)
  89.                 },time)
  90.             },

  92.         }
  93.     }
  94. </script>
  95. <style lang="scss" scoped>
  96.   .menulist-inner{
  97.     min-height:calc(100vh - 50px);
  98.     .menuItemBox{
  99.       height:36px;
  100.       &:hover{
  101.         background:rgba(62,70,120,.4);
  102.         &>span{
  103.           color: #fff;
  104.         }
  105.       }
  106.       span{
  107.         color:#ffffff;
  108.         flex-wrap:nowrap;
  109.         width:150px;
  110.         cursor:pointer;
  111.       }
  112.     }
  113.     .activeMenu{
  114.       background:rgba(62,70,120,1);
  115.     }
  116.   }
  117.   .menuTitlBox{
  118.     .menuTitle{
  119.       position: relative;
  120.       z-index: 10;
  121.     }
  122.     .firstMenuBk{
  123.       position: absolute;
  124.       left:0;
  125.       top:50%;
  126.       width:200px;
  127.       height:56px;
  128.       background:#3e4678;
  129.       -webkit-transform: translateY(-50%);
  130.       -moz-transform: translateY(-50%);
  131.       -ms-transform: translateY(-50%);
  132.       -o-transform: translateY(-50%);
  133.       transform: translateY(-50%);
  134.     }
  135.     .whiteText{
  136.       color:#ffffff;
  137.     }
  138.   }

  140. </style>
  141. <style>
  142.   .el-submenu{
  143.     position: relative;
  144.   }
  145.   .el-menu{
  146.     border:none !important;
  147.   }
  148.   .el-submenu__icon-arrow{
  149.     width:0;
  150.     height:0;
  151.     color:transparent;
  152.   }
  153.   .el-submenu__icon-arrow:before{
  154.     content:'' !important;
  155.   }
  156.   .el-submenu__icon-arrow:before{
  157.     content:'' !important;
  158.   }
  159.   .el-submenu__title{
  160.     background:rgba(44,55,71,1) !important;
  161.     margin-bottom:5px;
  162.     height:46px !important;
  163.     line-height: 46px !important;
  164.   }

  166.   .el-menu.el-menu--inline{
  167.     background-color: rgba(0,0,0,.2) !important;
  168.   }

  170.   .menulist-inner .menuItemBox.rowEnd span{
  171.     color: #A7BAC6;
  172.   }
  173.   .menulist-inner .menuItemBox.rowEnd.activeMenu span{
  174.     color: #fff;
  175.   }
  176. </style>
复制代码
5.注册全局组件

将menu组件注册为全局组件，方便需要的地方直接引入
到global-components.js文件中
  1. /*
  2. 全局组件引入注册
  3.   */

  5. import Menu from "../global-components/menu" //菜单

  7. export default {
  8.     install(Vue) {
  9.         Vue.component('Menu',Menu)
  10.     }
  11. };
复制代码
6.到router文件夹写好路由模块


6.1 base-router.js中写好我们需要的固定的路由
  1. /**
  2. * 页面上固定路由
  3. */
  4. import Layout from '../views/layout/layout'
  5. import Login from '../views/login/login'
  6. import Loading from '../views/loading/loading'
  7. const routes = [
  8.     {
  9.         path: '/',
  10.         redirect: '/loading',
  11.     },
  12.     {
  13.         path: '/layout',
  14.         component:Layout,
  15.         redirect: '/loading',
  16.     },
  17.     {
  18.         path: '/login',
  19.         name: 'Login',
  20.         component: Login
  21.     },
  22.     {
  23.         path: '/loading',
  24.         name: 'Loading',
  25.         component: Loading
  26.     },
  27. ]
  28. export default routes
复制代码
6.2 lm-router.js中写动态配置路由的方法
  1. import {setUserRoutesData} from "../utils/global-methods";

  3. const RouterPlugin = function() {
  4.     this.$router = null
  5.     this.$store = null
  6. }
  7. RouterPlugin.install = function(router, store) {
  8.     this.$router = router
  9.     this.$store = store
  10.     this.$router.$lmRouter = {
  11.         // 全局配置
  12.         safe: this,
  13.         // 动态路由
  14.         formatRoutes:function (routes) {
  15.             let routers=setUserRoutesData(routes)
  16.             this.safe.$router.addRoutes(routers)
  17.             return routers
  18.         }
  19.     }
  20. }
  21. export default RouterPlugin
复制代码
6.3 index.js中写路由入口
  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3. import baseRoutes from './base-router'
  4. import store from '../store'
  5. import LmRouter from './lm-router'

  7. Vue.use(VueRouter)

  9. const createRouter = () => {
  10.     return new VueRouter({
  11.         scrollBehavior (to, from, savedPosition) {
  12.             if (savedPosition) {
  13.                 return savedPosition
  14.             } else {
  15.                 return {
  16.                     x: 0,
  17.                     y: to.meta.savedPosition || 0
  18.                 }
  19.             }
  20.         },
  21.         routes: [...baseRoutes],
  22.         mode:'history',//
  23.     })
  24. }
  25. let router = createRouter()
  26. /**
  27. resetRouter函数用于重置路由，每一次动态配置路由之前要先重置路由
  28. **/
  29. export function resetRouter() {
  30.     const newRouter = createRouter()
  31.     router.matcher = newRouter.matcher // reset router
  32.     LmRouter.install(router, store)
  33. }
  34. /**
  35. 当用户刷新页面时，路由数据会丢失，如果已经登录，需要重新渲染路由。渲染的路由数据在登录时存在浏览器本地
  36. **/
  37. if(sessionStorage.getItem('hasLogin')){
  38.     let sessionMenus=localStorage.getItem('menus')
  39.     sessionMenus=sessionMenus ? JSON.parse(sessionMenus) : []
  40.     let sessionRoutes=localStorage.getItem('userRoutes')
  41.     LmRouter.install(router, store)
  42.     sessionRoutes=sessionRoutes ? JSON.parse(sessionRoutes) : []
  43.     router.$lmRouter.formatRoutes(sessionRoutes, true)
  44.     store.dispatch('setUserRoutes',sessionRoutes)
  45.     store.dispatch('setMenus',sessionMenus)
  46. }

  48. router.beforeEach((to, from, next) => {
  49.     let hasLogin = sessionStorage.getItem('hasLogin')
  50.     // console.log(to, from)
  51.     if(to.name===from.name){
  52.         return
  53.     }
  54.     console.log(hasLogin)
  55.     if(to.name==='Login'){
  56.         sessionStorage.clear()
  57.         localStorage.clear()
  58.         store.state.userRoutes=[]
  59.         store.state.menus=[]
  60.         next({replace:true})
  61.         resetRouter()
  62.         return
  63.     }
  64.     if (!hasLogin) {
  65.         next({path: '/login',replace:true})
  66.         return
  67.     }
  68.     next()

  70. })
  71. /**
  72. * 解决element-ui点击同一个菜单报错
  73. * @type {VueRouter.push|*}
  74. */
  75. const originalPush = VueRouter.prototype.push
  76. VueRouter.prototype.push = function push(location) {
  77.     return originalPush.call(this, location).catch(err => err)
  78. }
  79. export default router
复制代码
7.容器页和加载页

大部分有二级菜单的页面，父级页面通常只需要路由跳转功能，代码一致，为了精简代码，我们新建通用的路由容器页面layout.vue，二级菜单路由页面经layout页面跳转
为避免用户在浏览器直接输入、粘贴路径时，或者直接访问页面根路径时找不到路由（因为用户可能已经登录了，但这是没有已经登录界面），我们新建loading.vue，当用户粘贴路径，或者访问根路径时，在loading.vue中渲染路由

7.1 layout.vue
  1. <!--Layout-->
  2. <template>
  3.     <div>
  4.         <header class="header">头部</header>
  5.         <div class="main">
  6.             <div class="aside">
  7.                 <Menu/>
  8.             </div>
  9.             <div class="mainRight columnStart">
  10.                 <router-view></router-view>
  11.             </div>
  12.         </div>
  13.     </div>
  14. </template>

  16. <script>
  17.     export default {
  18.         name: 'Layout',
  19.     }
  20. </script>
复制代码
7.2 loading.vue
  1. <!--加载页面-->
  2. <template>
  3.     <div class="loadingBox">
  4.         <div class="loadingContentbox columnCenter">
  5.             <i class="el-icon-loading gray999"></i>
  6.             <div class="gray999 font16">页面加载中...</div>
  7.         </div>

  9.     </div>
  10. </template>

  12. <script>

  14.     import {reqUserRoutes} from "../../api/common";
  15.     import {setUserRoutesData,getAndFilterMenus,} from "../../utils/global-methods";

  17.     export default {
  18.         name: 'Loading',
  19.         data() {
  20.             return {}
  21.         },
  22.         computed: {},
  23.         created(){
  24.             let hasLogin = sessionStorage.getItem('hasLogin')
  25.             if(!hasLogin){
  26.                 this.$router.replace('/login')
  27.             }else{
  28.                 let menus=localStorage.getItem('menus')
  29.                 let userRoutes=localStorage.getItem('userRoutes')
  30.                 userRoutes=userRoutes ? JSON.parse(userRoutes) : []
  31.                 menus=menus ? JSON.parse(menus) : []
  32.                 if(!menus.length || !userRoutes.length){
  33.                     this.getMenuRoutes()
  34.                     return
  35.                 }
  36.                 let userInfo=getUserInfoFromLocalStorage()
  37.                 this.$store.dispatch('setUserInfo',userInfo)
  38.                 let {permissions=[]}=userInfo
  39.                 this.$store.dispatch('setPermissions',permissions)
  40.                 this.$router.replace((userRoutes[0] && userRoutes[0].path) ? userRoutes[0].path : '/404')
  41.             }
  42.         },
  43.         methods: {
  44.             //获取菜单和路由
  45.             async getMenuRoutes(){
  46.                 let userRoutes=await reqUserRoutes()
  47.                 console.log(userRoutes)
  48.                 let menus=getAndFilterMenus(JSON.parse(JSON.stringify(userRoutes)))
  49.                 if(!menus.length){
  50.                     this.$router.replace('/login')
  51.                     return
  52.                 }
  53.                 localStorage.setItem('userRoutes',JSON.stringify(userRoutes))
  54.                 localStorage.setItem('menus',JSON.stringify(menus))
  55.                 userRoutes=setUserRoutesData([...userRoutes])
  56.                 this.$store.dispatch('setUserRoutes',userRoutes)
  57.                 this.$store.dispatch('setMenus',menus)
  58.                 this.$router.addRoutes([...userRoutes])
  59.                 this.$router.replace((userRoutes[0] && userRoutes[0].path) ? userRoutes[0].path : '/404')
  60.             }
  61.         },

  63.     }
  64. </script>

  66. <style scoped lang="scss">
  67.     .loadingBox{
  68.         .loadingContentbox{
  69.             position: absolute;
  70.             left:50%;
  71.             top:50%;
  72.             -webkit-transform: translate(-50%,-50%);
  73.             -moz-transform: translate(-50%,-50%);
  74.             -ms-transform: translate(-50%,-50%);
  75.             -o-transform: translate(-50%,-50%);
  76.             transform: translate(-50%,-50%);
  77.             .el-icon-loading{
  78.                 font-size: 40px;
  79.                 margin-bottom:10px;
  80.             }
  81.         }
  82.     }
  83. </style>
复制代码
8.写筛选菜单和路由的方法

到utils，global-methods.js中写菜单筛选和路由数据方法
首先我们假设后端返回的数据为如下结构（仅列出关键字段）
  1. [
  2.   {
  3.     label:'人员管理',
  4.     path:'/person',
  5.     isLeftMenu:1,
  6.     routeName:'Person',
  7.     isContainer:1,
  8.     children:[
  9.      {
  10.         label:'人员列表',
  11.         path:'/person/person-list',
  12.         routeName:'PersonList',
  13.          isLeftMenu:1,
  14.          component:'/person/person-list',
  15.     },
  16.      {
  17.         label:'新增人员',
  18.         path:'/person/person-add',
  19.         routeName:'PersonAdd',
  20.          component:'/person/person-add',
  21.          isLeftMenu:0
  22.      }
  23.     ]
  24.   },
  25.     {
  26.       label:'订单管理',
  27.       path:'/order',
  28.       isLeftMenu:1,
  29.       routeName:'Order',
  30.        component:'/order/order',
  31.       isContainer:0,
  32.     }
  33. ]
复制代码
其中 label 为菜单显示标题，path 是路由路径，isLeftMenu用于区分是否为菜单，这里isLeftMenu=1表示是菜单，routeName路由名,isContainer用于区分路由是否经过容器组件layout，这里isContainer=1表示使用layout容器,component用于指定组件引入的路径
根据上面的数据结构，我们新建好对应得vue文件
  1. // 公共函数模块,用import引用
  2. // 根据日期时间值获取字符串各是日期
  3. import Layout from '../views/layout/layout'

  5. //获取并筛选菜单
  6. export const getAndFilterMenus=(menus)=> {
  7.     // console.log(menus)
  8.     menus=hanldeChildAppRoute(menus)
  9.     for(let i=0;i<menus.length;i++){
  10.         delete menus[i].component
  11.         //只有leLeftMeu=1的是菜单
  12.         if(!parseInt(menus[i].isLeftMenu)){
  13.             menus.splice(i,1)
  14.             i--
  15.         }
  16.         if(menus[i] && menus[i].children){
  17.             getAndFilterMenus(menus[i].children)
  18.         }
  19.     }
  20.     return menus
  21. }
  22. //处理用户路由数据
  23. export const setUserRoutesData=(routes,isChild)=>{
  24.     // console.log(routes)
  25.     !isChild && (routes=hanldeChildAppRoute(routes))
  26.     for(let i=0;i<routes.length;i++){
  27.         let {component,isContainer,routeName,keepAlive}=routes[i]
  28.         // console.log(routes[i])
  29.         //如果指定使用路由容器组件layout，即isContainer=1，那么路由的component值就是Layout组件
  30.         if(parseInt(isContainer)){
  31.             routes[i].component=Layout
  32.         }else{
  33.         //不使用容器组件的，根据component用Import动态引入
  34.             routes[i].component= () => import( `../views${component}`)
  35.         }
  36.         routes[i].name=routeName
  37.         /**
  38.         如果有子路由，那就用递归继续生成路由
  39.         **/
  40.         if((routes[i].children instanceof Array) && routes[i].children.length){
  41.             setUserRoutesData(routes[i].children,isChild)
  42.         }
  43.     }
  44.     return routes
  45. }
复制代码
9. 登录成功后生成路由

最后看下登录页，我们将在登录成功后获取菜单数据，然后动态生成页面路由，并且通过Vue路由的addRoutes方法将路由添加到VueRouter中
  1. <template>
  2.     <div class="login-wrap">
  3.         <div class="loginContent">
  4.             <div class="rowBtween loginFormBox">
  5.                 <el-form :model="loginForm" :rules="rules" ref="loginForm" class="loginForm">
  6.                     <el-row class="loginTitleBox">
  7.                         <span class="loginTitle font20">登录/Login</span>
  8.                     </el-row>
  9.                     <el-row>
  10.                         <lm-form-item-col :span="24" v-model.number="loginForm.username" prefix-icon="el-icon-user" placeholder="请输入用户名" prop="username" width="300"/>
  11.                     </el-row>
  12.                     <el-row>
  13.                         <lm-form-item-col :span="24" type="password" v-model="loginForm.password" prefix-icon="el-icon-lock" placeholder="请输入登录密码" prop="password" width="300"/>
  14.                     </el-row>
  15.                     <div class="rowCenter loginBtnBox" >
  16.                         <div class="loginBtn rowCenter font16" @click="submitForm">
  17.                             <span>登录</span>
  18.                             <div v-if="showLoading">
  19.                                 <span>中</span>
  20.                                 <i class="el-icon-loading"></i>
  21.                             </div>
  22.                         </div>
  23.                     </div>
  24.                 </el-form>
  25.             </div>
  26.         </div>
  27.     </div>
  28. </template>
  29. <script>
  30.     import {mapState} from 'vuex'
  31.     import axios from 'axios'
  32.     import {reqUserRoutes} from "../../api/common";
  33.     import {setUserRoutesData,getAndFilterMenus,} from "../../utils/global-methods";
  34.     import {resetRouter} from '../../router'
  35.     import baseRoutes from '../../router/base-router'
  36.     export default {
  37.         data() {
  38.             return {
  39.                 loginForm: {},
  40.                 rules: {
  41.                     username: [ { required: true, message: '请输入用户名', trigger: 'blur' } ],
  42.                     password: [ { required: true, message: '请输入密码', trigger: 'blur' }, ],
  43.                 },//规则
  44.                 showLoading:false,//是否显示加载
  45.             }
  46.         },
  47.         methods: {
  48.             //登录
  49.             async submitForm() {
  50.                 sessionStorage.clear()//清除所有缓存
  51.                 localStorage.clear()
  52.                 await this.$refs.loginForm.validate()
  53.                 this.showLoading=true
  54.                 axios({
  55.                     url:`/login`,
  56.                     method:'POST',
  57.                     data:this.loginForm
  58.                 }).then(async response=>{
  59.                     console.log(response)
  60.                     if(response){
  61.                         let userRoutes=await reqUserRoutes()
  62.                         localStorage.setItem(userRoutes,JSON.stringify(userRoutes))
  63.                         userRoutes=setUserRoutesData(JSON.parse(JSON.stringify(userRoutes)))
  64.                         console.log(userRoutes)
  65.                         this.$store.dispatch('setUserRoutes',JSON.parse(JSON.stringify(userRoutes)))
  66.                         let menus=getAndFilterMenus([...baseRoutes,...JSON.parse(JSON.stringify(userRoutes))])
  67.                         localStorage.setItem(menus,JSON.stringify(menus))
  68.                         //重置路由
  69.                         resetRouter()
  70.                         // console.log(router)
  71.                         //通过addRoutes方法添加路由
  72.                         this.$router.addRoutes([...userRoutes])
  73.                         // console.log(router)
  74.                         将菜单存到vuex
  75.                         this.$store.dispatch('setMenus',menus)
  76.                         if(!menus.length || !userRoutes.length){
  77.                             return
  78.                         }
  79.                         setTimeout(()=>{
  80.                             router.replace(path)
  81.                         },500)
  82.                     }
  83.                 }).catch(error=>{
  84.                     console.error(error)
  85.                     this.showLoading=false
  86.                 })

  88.             },
  89.         },
  90.     };
  91. </script>
  92. <style lang="scss" scoped>
  93.     .login-wrap{
  94.         position: relative;
  95.         background:#111111;
  96.         height:100vh;
  97.         overflow: hidden;
  98.         .loginContent{
  99.             .loginFormBox{
  100.                 position: absolute;
  101.                 left:50%;
  102.                 top:50%;
  103.                 -webkit-transform: translate(-50%,-50%);
  104.                 -moz-transform: translate(-50%,-50%);
  105.                 -ms-transform: translate(-50%,-50%);
  106.                 -o-transform: translate(-50%,-50%);
  107.                 transform: translate(-50%,-50%);
  108.                 .loginForm{
  109.                     width:300px;
  110.                     padding:20px;
  111.                     .loginTitleBox{
  112.                         margin-bottom:36px;
  113.                         .loginTitle{
  114.                             color:#ffffff;

  116.                         }
  117.                     }

  119.                     .loginBtnBox{
  120.                         width:100%;
  121.                         margin-top:5vh;
  122.                         .loginBtn{
  123.                             width:100%;
  124.                             height:40px;
  125.                             background:linear-gradient(90deg,rgba(15,70,193,1),rgba(0,147,168,1));
  126.                             border-radius:4px;
  127.                             color:#ffffff;
  128.                             cursor:pointer;
  129.                         }
  130.                     }
  131.                 }
  132.             }

  134.         }
  135.     }

  137. </style>
  138. <style>
  139.     .login-wrap .el-input{
  140.         border-bottom: 1px solid;
  141.         border-image: -webkit-linear-gradient(90deg,rgba(1,233,189,1) 0%,rgba(0,124,222,1) 100%) 30 30;
  142.         border-image: -moz-linear-gradient(90deg,rgba(1,233,189,1) 0%,rgba(0,124,222,1) 100%) 30 30;
  143.         border-image: linear-gradient(90deg,rgba(1,233,189,1) 0%,rgba(0,124,222,1) 100%) 30 30;
  144.     }
  145.     .login-wrap .el-input__inner{
  146.         background:transparent;
  147.         -webkit-border-radius: 0;
  148.         -moz-border-radius: 0;
  149.         border-radius: 0;
  150.         border:none;
  151.         color:#ffffff;
  152.     }
  153.     .login-wrap .el-input-group__append{
  154.         padding:0 !important;
  155.         border:none !important;
  156.         background:transparent !important;
  157.     }

  159. </style>
复制代码
附：一些常见问题

1. 用 require 而不用 import
我们在根据字符串生成路由组件的时候，要用 require 而不是 import ，否则会报以下错误信息：
2. 侧边栏消失
在点击动态生成的路由时，页面可以正常跳转，但是测试边不见了。是因为 动态生成的路由没有作为 Layout 组件的子组件，应该添加到 Layout 组件的 children 数组中。
3. 页面无内容
在点击二级菜单的时候，页面是空白的，没有任何内容。以上面案例为例，我们只需要在对应组件的父目录下，新建 index.vue 文件，写入 <router-view /> 即可。
4. 二级菜单展示不全
这个问题不属于动态路由的问题，elementui 框架中，如果子菜单只有一个，那么就不会生成多级菜单的形式。

总结

到此这篇关于前端vue如何根据菜单自动生成路由的文章就介绍到这了,更多相关前端vue菜单自动生成路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/319051suv.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: vue3中markRaw示例详解

下一篇: vue判断内容是否滑动到底部的三种方式

发表于 2024-4-12 14:47:02

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4