根据路由判断是否隐藏左侧菜单栏

已于 2022-09-15 15:57:43 修改
阅读量280 收藏
点赞数
文章标签： 前端 javascript
于 2022-09-15 15:42:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62810001/article/details/126872751
版权
本文探讨了在前端开发中，如何根据需求选择是否显示左侧菜单栏。在需要菜单栏的场景下，详细介绍了菜单栏控件的实现，并展示了包含菜单栏的路由信息。而在不需要菜单栏的情况下，阐述了全屏展示的目录路由信息处理方式。同时，文章还提到了路由信息在‘latentdanger’中的组织结构。
摘要由CSDN通过智能技术生成

当一下列表需要左侧菜单栏时，左侧菜单栏时单独写的一个控件，如下情况

其他目录不需要左侧菜单栏，全屏展示，如下情况

需要左侧菜单栏的路由信息，路由信息在其children中  如下

控件在 “latentdanger”中显示

 

不需要左侧菜单栏的目录路由信息如下，路由信息不放到其children中，（或者说不放到其“latentdanger”中）如下

無理:)
关注
4.vue3项目（四）：实现左侧菜单栏功能：静态layout搭建，logo组件，菜单栏静态搭建，生成动态菜单，引入图标，项目路由
鹏哥哥Aaa
11-06 388
实现左侧菜单栏功能：静态layout搭建，logo组件，菜单栏静态搭建，生成动态菜单，引入图标，项目路由
vue3之拆若依--记实现后台管理首页(左侧菜单栏、头部信息区域...)
最新发布
小白小白从不日别的博客
06-05 569
在根目录下新建 vite 目录，在vite目录下新建plugins子目录，在plugins目录下新建以下四个文件。这里首先需要在 assets 目录下新建，style子目录，并在该子目录下新建 tailwind.css 文件。: 虽然 Tailwind 提供了许多实用的 CSS 类，但为了确保这些类在所有浏览器中都能正确渲染，`：用于将 CSS 转换为 JavaScript 插件的工具，允许使用插件来处理 CSS 文件。在项目根目录下新建 tailwind.config.js 文件。
vue根据路由隐藏侧边栏
Maxiaobai_ing的博客
08-13 1796
项目要求某模块显示侧边栏，某模块隐藏侧边栏，所有模块统一引用了一个layout组件，所以在路由里设置一个自定义属性，在layout组件里监听路由，判断自定义属性值来隐藏侧边栏 // An highlighted block { path: '/equipment', component: Layout, name: 'equipmentLayout', hidden: true, meta: { title: '机电设备', icon: '框架
Vue项目中通过配置路由的元信息(meta）来控制是否在侧边栏显示
echo_go的博客
06-06 585
Vue项目中使用了侧边栏，并且希望某些路由不在侧边栏中显示，你可以通过配置路由的元信息（meta）来控制是否在侧边栏中显示。在你的路由文件中，给希望隐藏的路由添加一个。在上面的代码中，我们使用了计算属性。字段的路由，并在侧边栏中显示它们。其他路由可以继续保持默认的。的路由将不会在侧边栏中显示。
vue 根据后台数据 判断显示_Vue实战——利用路由元信息隐藏页面跳转后的主路由...
weixin_39881155的博客
11-21 541
承接上文：Vue实战——路由的导航守卫与从后台获取数据，继续我们的继续我们的实战之旅，本项目Gitee地址：https://gitee.com/vuejslearn/news-list.git当我们启动项目后，发现首页有导航栏：首页的导航栏然后我们点击newAbout，发现依然有导航栏：newAbout页面如果我们的项目中需要在一些页面中不显示导航栏，该怎么做呢？很简单，我们利用Router的元信...
根据用户访问的路由判断有无权限访问
小信的博客
09-16 569
首先，我使用的是用户角色权限控制包 Laravel-permissio， 关于怎么样设置权限，请看地址 在权限设置好后，需要去验证某个用户有没有权限访问某个路由， 就要去设置一个中间件， 生成中间件 php artisan make:middleware CheckPermission 在中间件里面写入 //验证用户是否具有请求权限 $user = auth('api')->user(); if (!$user->can($request->route(
在vue中实现某一些路由页面隐藏导航栏的功能操作
10-14
这里我们使用`v-show`指令来判断当前路由是否为登录页面，如果是，则不显示导航栏。示例如下： ```html $route.name!=='login'">... <router-view></router-view> ``` 在这个例子中，`$route`对象包含了当前激活的...
前端权限管理 - 左侧菜单栏 token 按钮权限
Kane_qqq的博客
04-23 2322
//菜单的控制 1.查看登录之后获取到的数据 token,用于前段用户的状态保持 rights,该用户具备的权限数据，一级权限就对应一级菜单，二级权限就对应二级菜单 2.根据rights中的数据,动态渲染左侧菜单栏，数据在Login.vue得到，但是在Home.vue中使用，所以数据可以用UVEX进行维护 Uvex中的代码： state:{ rightList:[] } mutations:{ serRightList(state,data){ state.rightList = data }.
vue element admin 我设置有token就能等于进去 为什么左边没有菜单栏了呢 感觉路由信息 有问题 给我分析分析
07-15
同时，在路由守卫中，根据用户权限判断是否显示菜单栏。 3. 调试路由信息：您可以在开发者工具中查看控制台输出，检查是否有任何与路由相关的错误或警告信息。尝试打印出您的路由信息对象，确保它包含了正确的路由...
vue-element-admin只有一个子路由，不显示侧边栏
yttqq的博客
02-17 1360
vue-element-admin只有一个子路由，不显示侧边栏
vue点击某些路由，打开新的窗口并隐藏侧边栏
m0_56568186的博客
01-20 3178
vue点击某些路由，打开新的窗口并隐藏侧边栏
【VUE】demo03-VUE后台管理系统-vuex实现router动态路由+左侧sidebar+顶部breadcrumb
键上艺术家
02-10 1540
上两篇文章： 【VUE】demo01-VUE做后台管理系统页面实例-创建基本环境+页面布局 【VUE】demo02-VUE后台管理系统-axios接口测试+router动态路由 工具：Visual Studio Code + Vue + Vue cil2 + Vuex + Vue Router + ElementUI + axios 项目代码地址： 1.8加入vuex 第一步先添加 vuex 的实例store，在 src 文件夹中创建一个文件store/index.js，我们还需要添加 m...
antd-pro(V5)动态菜单
qq_27175079的博客
12-30 4789
一般情况下登录系统后菜单是由后端返回的，不是前端写死的。antd-pro也支持，修改的路径在app.tsx 在 layout 里加一个menuDataRender字段先给一个() =>[]可以看到左侧菜单没了，说明配置生效了，接下来就可以围绕这个配置做文章了，我们先定义一个 menuDataRender方法。根据登录缓存到本地的数据做下处理，判断菜单里要展示哪些内容（比如替换字段，隐藏不显示的菜单，隐藏按钮等），处理好了后返回一个数组结构即可。 示例代码如下 export const layout:
angularjs动态侧边栏菜单_AngularJS之动态菜单操作指令
weixin_39929715的博客
01-17 544
前言在我们创建一个angularJS应用的时候，菜单往往往是不可或缺的元素之一。也许在我们静态菜单的时候不会发现在指令中操作菜单收缩、折叠展开没有任何问题，因为我们在操作之前，页面元素渲染已经完成，所以在指令里面通过element查找目标元素可以成功。但是一旦我们的菜单的数据不是静态而是通过后台接口加载动态数据渲染，我们会发现本来在静态写好的指令操作，在转变为动态数据加载之后，怎么也没法查找到想...
【angular5项目积累总结】侧栏菜单 navmenu
weixin_30387339的博客
04-10 175
View Code import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { ConfigureService } from '../../configure/configure.service'; import...
左边是导航栏右边是相应的页面_angular整合ng-zorro、左边导航栏
weixin_39976251的博客
01-26 508
上一篇已经介绍了angular了，接下来介绍ng-zorro，这个阿里推出的ant design of angular，已经做了一些基础性的工作，并且封装了一些组件，并且也是官方推荐的。 在新建好的angular工程中引入ng-zorro代码如下:ng add ng-zorro-antd等待安装完成后通过命令npm start或者ng serve -- open均可以启动工程,页面如下图，这里我...
vue-admin 完全隐藏掉左侧菜单栏
smxr
10-28 2369
在 src/styles/sidebar.scss文件中修改第一个 .hideSidebar .hideSidebar { .sidebar-container,.sidebar-container .el-menu { width: 36px!important; margin-left: -3%;//新曾经这个就可以在点击隐藏按钮时完全隐藏左侧菜单栏 } .main-container { margin-left: 36px; .
vue项目 - 根据路由去做v-if v-else 的判断，设置显示隐藏
weixin_55042716的博客
06-16 2510
实现功能 : 封装的组件中，功能比较多，有些功能某些页面不需要， 解决：可以通过路由去设置特定的页面功能不需要。 代码实现： <div v-if='xians'> 这里是要显示的内容 </div> <div v-else> 这里是不需要显示的内容 </div> //判断路由 data(){ return { xians:this.$route.path.includes('/print') } } ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值