【VUE】侧边栏菜单配置

最新推荐文章于 2024-03-03 10:50:09 发布
最新推荐文章于 2024-03-03 10:50:09 发布
阅读量2k 收藏 12
点赞数 2
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_64630359/article/details/128287890
版权

1. layout静态布局(element-ui里的layout组件，左侧导航栏，右侧内容栏）

 

 

2. 创建路由页面，menu菜单开启路由，内容栏设置路由出口

创建对应的路由页面并设置路由规则

 

3. 回到layout布局页面，开启menu的路由跳转，在每一项item设置要跳转的路由信息

 

4. 最终效果

 

On the way656
关注
  • 2
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vuepress-bar:VuePress边栏和导航栏生成器基于文件和目录结构。 集中您的文档，而不是侧边栏或导航栏
05-06
Vuepress酒吧 VuePress边栏和导航栏生成器基于文件和目录结构。 集中您的文档，而不是侧边栏或导航栏。 概要 //.vuepress/config.js const getConfig = require ( "vuepress-bar" ) ; const { nav , sidebar } = getConfig ( ) ; module . exports = { themeConfig : { nav , sidebar } } ; 用法 1.获取菜单和栏配置 // .vuepress/config.js const { nav , sidebar } = getConfig ( options ) ; // Use default location of `.vuepress`: `${__dirname}/..` const
vue3+elementplus后台管理系统，实现侧边栏菜单显示到主内容区域
低代码布道师的博客
07-24 2345
我们本篇主要是解决了侧边栏导航点击的时候显示到主内容区域的问题，需要设置好路由的嵌套关系，让菜单启用路由功能，并且在主内容区域设置路由视图。
Vue开发实例（九）动态路由实现左侧菜单导航
最新发布
Daniel
03-03 1987
动态路由，防止超权限展示不属于自己的内容
vue.js实现左边导航切换右边内容
10-16
主要为大家详细介绍了vue.js实现左边导航切换右边内容，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue3和vue-router4配置下的element-admin-template 权限路由，根据不同身份显示不同侧边栏（导航栏）
qq_41705342的博客
01-12 1309
element-admin-template 权限路由，根据不同身份显示不同侧边栏（导航栏）前言需要修改的几个文件步骤src/permission.jssrc/store/modules/permission.jssrc/store/modules/user.jssrc/store/getters.jssrc/store/index.jssrc/router/index.jssrc/Layout/components/Sidebar/index.vue 前言 网上大多教程都是基于vue2.x的权限路由教程，
vue-element-admin登录逻辑，以及动态添加路由，显示侧边栏
knn的博客
12-17 4336
这段时间在研究element-admin，感觉这个库有许多值得学习的地方，我学习这个库的方法是，先看它的路由，顺着路由，摸清它的逻辑，有点像顺藤摸瓜。 这个库分的模块非常清晰，适合多人合作开发项目，但是如果一个人去用这个库开发后台，步骤显的有点繁琐，特别是调用后端接口，之前一个方法就调用到了，但是用这个库，需要先后分几步调用。 比如说调用一个登陆接口：点击登陆按钮----》调用store中的方...
基于vue.js实现侧边菜单栏
10-20
主要为大家详细介绍了基于vue.js实现侧边菜单栏的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue-sidebar-menu:Vue.js侧边栏菜单组件
05-12
Vue侧边栏菜单 Vue.js侧边栏菜单组件 演示版 本文档适用于Vue 2，对于Vue 3，您可以尝试预发行版，请参见 安装 npm i vue-sidebar-menu --save 全局安装插件。 //main.js import Vue from 'vue' import VueSidebarMenu from 'vue-sidebar-menu' import 'vue-sidebar-menu/dist/vue-sidebar-menu.css' Vue . use ( VueSidebarMenu ) 或在本地导入组件。 //App.vue import { SidebarMenu } from 'vue-sidebar-menu' export default { components : { SidebarMenu } } 基本用法 < temp
vue 实现侧边栏的导航
weixin_47906106的博客
10-18 3624
侧边栏导航
vue实现侧边栏导航效果
10-16
主要为大家详细介绍了vue实现侧边栏导航效果，右侧显示对应内容，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
（十）VUE侧边菜单栏导航--基于SpringBoot+MySQL+Vue+ElementUI+Mybatis前后端分离面向小白管理系统搭建
wdyan297的博客
01-23 5715
VUE侧边菜单栏导航设计（1）理解并逐步掌握VUE组件的含义；（2）深入理解VUE单页面应用；（3）初步掌握VUE路由的概念和使用方法。
基于Vue实现的侧边栏导航组件
04-14
基于Vue实现的侧边栏导航组件,左侧边栏导航组件,当左侧导航超过一屏高度时,切换导航具有动画居中效果,可以滑动右侧区域来切换导航,滑动到屏幕底部时自动切换到下个导航,相反滑动到顶部切换上一屏,效果展示: https://image-static.segmentfault.com/405/972/40597237-cef893b747aeab81
前端VUE权限管理（包含菜单权限和按钮权限），router.addRoutes根据后台接口传递数据生成动态路由
08-15
VUE-router.addRoutes根据后台接口传递数据生成动态路由，前端拿到配置并生成侧边栏-实现页面级权限控制。 ----------------------------------------------- 登陆成功之后直接由后端返回异步路由表，然后前端直接...
vue-secondMenu-test:Vue + elementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏
05-10
vue-secondMenu-test Vue + ElementUI 后台管理...项目实现了登录功能，一二级菜单联动选择展示不同的主体内容部分，封装了 axios 请求库，还配置了管理员和普通用户的权限区分。 运行项目 npm install npm run dev
若依框架VUE前端界面，登录后默认跳转至动态路由第一路由（第一个子菜单）
02-03
（第一个子菜单） 若依前后端分离框架去掉首页 登录后跳转至动态路由的第一个路由 （第一个子菜单） 若依前后端分离框架去掉首页 登录后跳转至动态路由的第一个路由 （第一个子菜单） 若依前后端分离框架去掉首页 ...
vue 基于elementUi根据路由表动态加载侧边栏导航
qq_41206305的博客
07-08 2160
vue 基于elementUi根据路由表动态加载侧边栏导航 在学习element-admin后，发现动态路由很有意思，打算自己重现一下动态路由功能 路由router.js:在路由中可以添加hidden字段判断该路由是否显示 const routes = [ { path: '/', redirect: '/container', hidden: true//控制该路由是否显示 }, { path: '/container', name: 'Contain
一步步创建一个vue项目（三）根据路由生成一个侧边栏(二)
weixin_42645490的博客
10-23 1861
一步步创建一个vue项目（三） 根据路由生成一个侧边栏 大致的样子： 配置想要的路由 比如我的路由文件：router/index.js import Vue from 'vue' import Router from 'vue-router' import Layout from '../views/layout/Layout' const _import = require('./_import_' + process.env.NODE_ENV) Vue.use(Router) export defau
vue router 根据路由区分用户权限并生成动态侧边栏
07-04 3303
背景 往往在管理后台系统中，vue-router 要做更多的事情 挂载组件到页面 根据不同的用户角色，如：超级管理员，审计用户，普通用户等来做权限管理 生成复杂的侧边栏 那么，如何使用一套定义好的 router 来做到以上三个需求呢？ 分析 首先，我们来细致的分析一下这三个需求有哪些具体需要 挂载组件到页面中 想必不用多说了，vue-router 本来就是做这个的 区分不同用户角色 用户角色是用户登录后后台返回的，比如这个字段是user_role，那么， 首先，我们可以把这个字段首先存储在 vuex
vue侧边栏遍历router
08-29
你可以使用Vue Router和Vue的循环指令v-for来遍历路由配置并生成侧边栏菜单。下面是一个简单的示例： 首先，你需要在路由配置中定义你的侧边栏菜单项。例如，假设你的路由配置如下： ```javascript import Vue ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值