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

已于 2022-09-15 15:57:43 修改
阅读量216 收藏
点赞数
文章标签： 前端 javascript
于 2022-09-15 15:42:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62810001/article/details/126872751
版权

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

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

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

控件在 “latentdanger”中显示

 

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

無理:)
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue结合路由配置递归实现菜单栏功能
10-15
主要介绍了Vue结合路由配置递归实现菜单栏,本文通过实例代码给大家介绍的非常详细，对大家的学习火锅工作具有一定的参考借鉴价值，需要的朋友可以参考下
Vue项目中通过配置路由的元信息(meta）来控制是否在侧边栏显示
echo_go的博客
06-06 452
Vue项目中使用了侧边栏，并且希望某些路由不在侧边栏中显示，你可以通过配置路由的元信息（meta）来控制是否在侧边栏中显示。在你的路由文件中，给希望隐藏的路由添加一个。在上面的代码中，我们使用了计算属性。字段的路由，并在侧边栏中显示它们。其他路由可以继续保持默认的。的路由将不会在侧边栏中显示。
vue 根据后台数据 判断显示_Vue实战——利用路由元信息隐藏页面跳转后的主路由...
weixin_39881155的博客
11-21 497
承接上文：Vue实战——路由的导航守卫与从后台获取数据，继续我们的继续我们的实战之旅，本项目Gitee地址：https://gitee.com/vuejslearn/news-list.git当我们启动项目后，发现首页有导航栏：首页的导航栏然后我们点击newAbout，发现依然有导航栏：newAbout页面如果我们的项目中需要在一些页面中不显示导航栏，该怎么做呢？很简单，我们利用Router的元信...
vue根据路由隐藏侧边栏
Maxiaobai_ing的博客
08-13 1685
项目要求某模块显示侧边栏，某模块隐藏侧边栏，所有模块统一引用了一个layout组件，所以在路由里设置一个自定义属性，在layout组件里监听路由，判断自定义属性值来隐藏侧边栏 // An highlighted block { path: '/equipment', component: Layout, name: 'equipmentLayout', hidden: true, meta: { title: '机电设备', icon: '框架
根据用户访问的路由判断有无权限访问
小信的博客
09-16 535
首先，我使用的是用户角色权限控制包 Laravel-permissio， 关于怎么样设置权限，请看地址 在权限设置好后，需要去验证某个用户有没有权限访问某个路由， 就要去设置一个中间件， 生成中间件 php artisan make:middleware CheckPermission 在中间件里面写入 //验证用户是否具有请求权限 $user = auth('api')->user(); if (!$user->can($request->route(
在vue中实现某一些路由页面隐藏导航栏的功能操作
10-14
主要介绍了在vue中实现某一些路由页面隐藏导航栏的功能操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
通过vue刷新左侧菜单栏操作
11-19
今天完成了手头任务就想着做点什么，刚好领导让我看看项目左侧菜单栏不刷新的问题，我也是刚刚接触vue，很多东西都还不是很熟练，这也是我的第一篇自己写的博客，感觉还是很兴奋的，我觉得写博客这个习惯要一直养成...
Vue-路由导航菜单栏的高亮设置方法
01-21
如下所示： 默认情况下，路由的导航菜单，会自动给当前菜单添加router-link-exact...以上这篇Vue-路由导航菜单栏的高亮设置方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
vue项目实现设置根据路由高亮对应的菜单项操作
11-19
也可以在router路由数组里面设置meta信息，然后根据这个信息来判断是否高亮（这里可以循环生成菜单，不过我没有写）只是说一下思路 这样即可根据路由实现对应的菜单高亮了，我个人认为第二种比较灵活，如果菜单...
vue如何根据网站路由判断页面主题色详解
10-17
主要给大家介绍了关于vue如何根据网站路由判断页面主题色的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue 动态添加路由及生成菜单的方法示例
12-12
写后台管理系统，估计有不少人遇过这样的需求：根据后台数据动态添加路由和菜单。 为什么这么做呢？因为不同的用户有不同的权限，能访问的页面是不一样的。 在网上找了好多资料，终于想到了解决办法。 动态生成路由 ...
当vue路由变化时,改变导航栏的样式方法
10-18
今天小编就为大家分享一篇当vue路由变化时,改变导航栏的样式方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue地址栏直接输入路由无效问题的解决
10-17
主要介绍了vue地址栏直接输入路由无效问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
10-14
主要介绍了vue+element使用动态加载路由方式实现三级菜单页面显示的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 利用路由守卫判断是否登录的方法
10-17
今天小编就为大家分享一篇vue 利用路由守卫判断是否登录的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue如何实现自定义底部菜单栏
12-12
最近vue不是特别火，自己想写一个vue 的底部菜单栏，然后试着开始写，起来还是听痛苦的，但是还是写出来，这个过程重查询了一些资料和看了一些视频。 1 写好界面 这是我写好的四个界面 2 在router.js重定义路由 ...
element-ui使用导航栏跳转路由的用法详解
10-18
今天小编就为大家分享一篇element-ui使用导航栏跳转路由的用法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
10-14
主要介绍了antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue路由跳转，左边的菜单栏不变，右边页面改变
最新发布
07-23
你可以使用 Vue Router 的嵌套路由来实现这个效果。具体步骤如下： 1. 在你的 Vue 项目中，打开路由文件（一般是 `router/index.js`）。 2. 创建一个父级路由用于容纳菜单栏和右边的页面。可以将其命名为 `MainLayout`（或任何你喜欢的名称）。 3. 在 `MainLayout` 路由下定义两个子路由：一个用于菜单栏，另一个用于右边的页面。 4. 在菜单栏的子路由中配置对应的组件，这个组件将会始终保持不变。 5. 在右边页面的子路由中配置对应的组件，这个组件将会根据路由变化而改变。 下面是一个示例代码： ```javascript // router/index.js import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); const router = new Router({ routes: [ { path: '/', name: 'MainLayout', component: MainLayout, children: [ { path: 'menu', name: 'Menu', component: Menu, }, { path: 'page1', name: 'Page1', component: Page1, }, { path: 'page2', name: 'Page2', component: Page2, }, ], }, ], }); export default router; ``` 在上述代码中，`MainLayout` 是父级路由，`Menu` 组件是菜单栏的子路由，`Page1` 和 `Page2` 组件是右边页面的子路由。当你在浏览器中访问 `http://yourdomain.com/menu` 时，菜单栏的内容不变，右边页面显示 `Menu` 组件。当你访问 `http://yourdomain.com/page1` 时，菜单栏的内容不变，右边页面显示 `Page1` 组件。以此类推。 请注意，上述示例只是一种实现方式，具体根据你的项目需求进行调整。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值