VUE大型后台管理项目左侧导航栏搭建

最新推荐文章于 2024-05-17 11:40:43 发布
最新推荐文章于 2024-05-17 11:40:43 发布
阅读量202 收藏
点赞数
文章标签： vue.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HPlove__77/article/details/132578905
版权

01.项目中路由出口和侧边栏配置位置

 打开sidebar组件中的index.vue文件就是配置当前左侧导航栏文件。 

然后在控制台输出currentPortalMenu

小川同学77
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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框架】菜单栏权限的使用与显示
kevin的博客
08-14 599
在【Vue框架】Vue路由配置中的getters.js里，可以看到有一个应用程序的状态（变量）叫，这个就是管理前端菜单栏的状态。具体代码的介绍，都以注释的形式来说明。
vue3使用element-plus搭建后台管理系统---菜单管理
07-01
vue3使用element-plus搭建后台管理系统---菜单管理
Vue 电商后台管理项目阶段性总结(推荐)
10-14
主要介绍了Vue 电商后台管理项目阶段性总结，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
Vue项目 - 通用后台管理资料
05-05
1、项目下载工具yarn详细介绍， 2、从零开始，从安装node到项目成型 3、项目中所需的数据
sidebar（侧边栏原理vue admin）
qq_52151772的博客
01-24 8749
sidebar 侧边栏原理
vue-element-admin sidebar分析
记笔记的小地方ヾ(๑╹◡╹)ﾉ"
07-18 5208
-
Vue3项目-配置路由及侧边栏导航栏
dayouan的博客
03-31 3803
2.在router文件夹下面index文件中 routes数组添加重定向 其中某对象中添加 children 属性 配置 二级路由 并关联上想要链接的页面 component 后面跟懒加载页面。-----------------------此时 通过手动输出地址就可以跳转地址 显示出路由出口的内容----------------------首先要提取头部组件到公共文件夹中 方便后期维护 然后引入到HomeView文件中 因为我写的vue3是以js为主的 因此 要删除掉类型注解。
Vue自定义管理后台侧边栏SideBar
楚楚梦厦的博客
08-19 6274
在做基于vue的PC管理后台项目的时候遇到了有UI要求的需求，这时候当然不能把element照搬到项目中，这个项目历时1个月，几乎是天天10点到3点回家…仅次写下留念 1.html结构 el-menu标签在这里唯一的作用就是充当侧边栏外面的边界…并对其默认样式进行了修改 <template> <el-menu :default-active="defaultActive" router :unique-open
在吗？手把手教vue-cli4+elementUI搭建通用后台管理系统---(一)UI界面搭建之sidebar侧边栏菜单(点击左侧导航，切换右侧内容)
qq_36818931的博客
10-27 2513
文章目录前言一、创建侧边栏组件二、elementUI组件-导航菜单el-menu1.引入库2.读入数据总结 前言 上一篇文章在吗？手把手教vue-cli4+elementUI搭建通用后台管理系统—(一)UI界面搭建之head头部已经搭建好头部，那么本文将讲侧边栏导航。 提示：以下是本篇文章正文内容，下面案例可供参考 一、创建侧边栏组件 在项目目录src/views下创建一个TheHeader.vue文件，代码如下： 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而..
vue实现后台管理权限系统及顶栏三级菜单显示功能
10-16
主要介绍了vue实现后台管理权限系统及顶栏三级菜单显示功能，本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
vue搭建后台管理系统模板
02-12
vue搭建后台管理系统模板，能帮助你快速配置好webpack等功能，大神必备神器，导入即用，无需更改！
vue.js Intersection Observer api 实现双向联动
qq_37309987的博客
09-22 937
解决方案：使用 js 提供的 intersectionObserver api 实现，此 api 可观察目标元素与其祖先元素或顶级文档视口交叉状态，通过交叉状态来实现双向联动。描述：移动端侧边栏导航和右侧内容双向联动，用户点击左侧侧边栏导航，右侧内容能快速定位到内容区域，右侧内容在滚动时，左侧导航会高亮显示当前内容所对应的导航。问题难点：右侧内容滚动时，左侧导航能定位到当前内容对应的导航。1、侧边栏导航子组件 sideBar.vue。2、内容区域子组件 content.vue。
vue实现左侧固定菜单栏锚点及滚动高亮（组件封装）
qq_48434912的博客
11-27 1432
以上两个功能代码要结合使用，如果只使用点击功能则需要在父组件中修改selectedAnchor 的值。②在父组件中接收子组件传递的参数，并使用scrollIntoView实现锚点功能。①首先让元素默认选中第一个，在父组件中设置一个字段表示选中第几个。①在子组件中添加点击事件，通过$emit将参数传给父组件。到此为止以上代码实现了滚动自动选择菜单的功能。③在子组件中接收并使用。④在父组件编写功能代码。②将该值传递给子组件。
vue2.0 - layout组件（五）SideBar和Main页面布局
sqLeiQ的博客
06-16 1783
vue2.0 Layout组件
【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式
热门推荐
Sabrina_cc的博客
07-20 6万+
【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式
vue-element-admin layout组件解析【Sidebar】
weixin_50513383的博客
12-06 2262
> index.vue <template> <!-- 判断是否显示logo --> <div :class="{'has-logo':showLogo}"> <!-- 判断是否隐藏侧边栏 --> <logo v-if="showLogo" :collapse="isCollapse" /> <!-- 主侧边栏标签 --> <el-scrollbar wrap-class="scrollb
vue+elementUi——实现后台管理系统的布局(sideBar+header+appMain)
yehaocheng520的博客
08-06 7888
在做后台管理系统时，最常见的系统布局就是：左右布局。左侧是菜单栏，右侧是内容区，内容区又分为头部和展示区。如下： 因此分析一下这个页面的结构： 1.html部分 <template> <div class="app-wrapper"> <div class="layout-aside" :class="{collapse:isCollapse}"> <div class="layout-logo"> <router-link to=
HOW - Canvas 入门系列之基于vue-konva的多维表格（四）
最新发布
weixin_58540586的博客
05-17 1190
今天我们将将基于vue-konva 实现的一个表格渲染的组件。
vue2 后台管理项目搭建
09-24
Vue 2后台管理项目的搭建步骤如下： 1. 安装Node.js：首先要确保计算机上已安装Node.js，可以在官方网站上下载并安装最新版本。 2. 使用Vue CLI创建项目：打开命令行工具，运行以下命令来安装Vue CLI： ``` npm install -g @vue/cli ``` 然后，使用以下命令创建Vue项目： ``` vue create project-name ``` 在创建过程中，可以选择使用默认配置还是手动选择配置。如果是新手，建议选择默认配置。 3. 安装相关依赖：在项目目录下，运行以下命令安装一些常用的依赖项： ``` cd project-name npm install vue-router axios element-ui ``` 其中，vue-router用于处理路由，axios用于进行网络请求，element-ui是一个常用的UI框架，可以根据需要选择安装其他依赖。 4. 配置路由和页面：在src目录下创建router目录，并在其中创建index.js文件来配置路由。在src目录下创建views目录，并在其中创建各个页面组件。 在router/index.js文件中，添加以下代码配置路由： ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router ``` 在views目录下的各个组件中，可以编写对应的页面内容。 5. 编写页面代码：在各个组件中编写页面代码，并根据需要引入element-ui的组件进行布局。 6. 运行项目：在命令行工具中运行以下命令启动项目： ``` npm run serve ``` 项目将在本地服务器上运行，可以在浏览器中访问http://localhost:8080来查看。 这就是Vue 2后台管理项目的搭建流程，根据实际需求，可以继续配置页面、添加组件等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值