关于vue-admin动态生成侧边栏问题

本文介绍了在vue-admin项目中如何动态生成侧边栏菜单。主要涉及修改router文件,包括删除原有路径并保留变量,添加development.js和_import_production.js文件。同时,创建了promission.js文件,用于处理路由权限,引入axios、element-ui和store,并通过axios从后台获取路由信息。constantRouterMap1展示了部分默认路由配置。
摘要由CSDN通过智能技术生成

router文件的修改

  • 1,删除文件中原有路径 保留一个路劲变量
    在这里插入图片描述同时添加两个这样的文件
    其中development.js文件加入
    module.exports = file => require(’@/views/’ + file + ‘.vue’).default
    在_import_production.js文件加入
    module.exports = file => () => import(’@/views/’ + file + ‘.vue’)
    2,在src文件中添加promission.js文件并在main.js引用
    promission.js 内容如下
    import router from ‘./router’
    // import { Message } from ‘element-ui’
    import axios from ‘axios’
    const _import = require(’./router/import’ + process.env.NODE_ENV)//获取组件的方法
    import Layout from ‘./views/layout/Layout’ //Layout 是架构组件,不在后台返回,在文件里单独引入
    import store from ‘./store/index’
    import Cookies from ‘js-cookie’
    var getRouter//用来获取后台拿到的路由
    //默认文件路径如下用于页面刚开始加载
    //compone

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以通过修改vue-admin-template项目中的`src/layout/components/Sidebar/index.vue`文件来配置侧边栏手风琴效果。 首先,找到`<el-menu>`标签,将其更改为`<el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">`。在这里,我们添加了`:default-active属性和`@open`、`@close`事件。 接下来,在`data()`方法中添加以下代码: ```javascript data() { return { activeMenu: '', // 默认激活的菜单项 openedMenus: [] // 当前打开的菜单项数组 } } ``` 然后,在同一个文件中添加以下两个方法: ```javascript methods: { handleOpen(key, keyPath) { // 当打开菜单项时调用,将打开的菜单项加入到openedMenus数组中 this.openedMenus = keyPath }, handleClose(key, keyPath) { // 当关闭菜单项时调用,将关闭的菜单项从openedMenus数组中移除 this.openedMenus = keyPath } } ``` 最后,在`<el-menu-item>`和`<el-submenu>`标签上添加`:index`属性,将其绑定到对应的菜单项的唯一标识符上。例如: ```html <el-menu-item :index="'/dashboard'" icon="el-icon-s-home">仪表盘</el-menu-item> <el-submenu :index="'/nested'" icon="el-icon-folder-opened"> <template slot="title">嵌套菜单</template> <el-menu-item :index="'/nested/menu1'">菜单 1</el-menu-item> <el-menu-item :index="'/nested/menu2'">菜单 2</el-menu-item> </el-submenu> ``` 现在,您的侧边栏应该已经配置成手风琴效果了。打开一个菜单项时,其他打开的菜单项将会自动关闭。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值