vue根据路由隐藏侧边栏

最新推荐文章于 2024-03-22 12:13:11 发布
最新推荐文章于 2024-03-22 12:13:11 发布
阅读量1.7k 收藏 8
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Maxiaobai_ing/article/details/119675070
版权

项目要求某模块显示侧边栏，某模块隐藏侧边栏，所有模块统一引用了一个layout组件，所以在路由里设置一个自定义属性，在layout组件里监听路由，判断自定义属性值来隐藏侧边栏

// An highlighted block
{
   
    path: '/equipment',
    component: Layout,
    name: 'equipmentLayout',
    hidden: true,
    meta: {
   
      title: '机电设备'
最低0.47元/天 解锁文章
Maxiaobai_ing
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何隐藏路由菜单选项
weixin_58207509的博客
10-25 596
我们添加了一个页面叫importance 看页面显示 它便会显示出一个子集 如何进行隐藏呢 答案:hidden:true 如上 加上后 看页面显示 如此 便完美解决了 如何隐藏问题
Vue项目中通过配置路由的元信息(meta）来控制是否在侧边栏显示
echo_go的博客
06-06 530
Vue项目中使用了侧边栏，并且希望某些路由不在侧边栏中显示，你可以通过配置路由的元信息（meta）来控制是否在侧边栏中显示。在你的路由文件中，给希望隐藏的路由添加一个。在上面的代码中，我们使用了计算属性。字段的路由，并在侧边栏中显示它们。其他路由可以继续保持默认的。的路由将不会在侧边栏中显示。
在vue中实现某一些路由页面隐藏导航栏的功能操作
01-21
为了将导航栏显示在每一个页面中，可以将导航栏与<router>放在同一级显示，如下： <header> ... </header> <router></router> 但是，在某些时候，我们需要隐藏导航栏显示，比如登录界面，为了实现导航栏的隐藏，可以使用如下代码： <header v-show=$route.name!> ... </header> <router></router> 这样就可以实现隐藏导航栏。 补充知识：vue+el-menu实现路由刷新和导航栏菜单状态保持（局部刷新页面） 一、菜单项激活状态
vue点击某些路由，打开新的窗口并隐藏侧边栏
m0_56568186的博客
01-20 3046
vue点击某些路由，打开新的窗口并隐藏侧边栏
Vue的动态路由
msqmsqm的博客
06-13 835
最近为了加强学习，慢慢的研究一些模板，就比如 vue-element-admin模板。 这个模板写的非常好。里面也有一些难点，也是很好的一个学习方式让我们去学习。 今天看到了的是 关于路由的动态管理的使用。以及webpack自动导入加载文件（控制加载和自动加载） 路由的动态管理: 先贴代码。 router中的index.js中的代码 /** * 注意：子菜单仅在路由children.length> = 1时出现 * * hidden: true 如果设置tru
vue-element-admin中添加路由不显示，让一些不需要展示的路由隐藏，但还是能访问到。
熟悉JS拼写的FE
09-20 1905
vue-element-admin中添加路由不显示，让一些不需要展示的路由隐藏，但地址还是能访问到。 前言:在使用vue-admin搭建后台，注册路由时，发现注册的每个路由都会被显示到侧边栏，如果需要隐藏一些不被显示的路由，但是能正常跳转,怎么办?看看这篇博客 只需要在隐藏的路由上加一个hidden :true 以上红框框住的就是我需要隐藏的，这是我在admin中操作路由遇到的一个小问题。 下面是以上图片路由部分运行的效果图: 解决了吗?有帮助的话点个赞吧 更多推荐：wan
vue实现侧边栏导航效果
01-19
本文实例为大家分享了vue侧边栏导航的具体代码，供大家参考，具体内容如下 最终效果 点击下一个导航，上一个导航自动收回 实现代码 1.下载vue-router npm install vue-router --save-dev 2.在main.js中引入 ...
vue+Vue Router多级侧导航切换路由(页面)的实现代码
11-30
在项目里经常会遇到侧导航切换页面的功能。 如果我们将侧导航做成公共组件，来调用的话，就会在每一个页面都引用该组件，在后期维护的时候比较麻烦，比如改参数。 所以此文将侧导航做成父页面组件，将切换的页面做成...
详解Vue路由开启keep-alive时的注意点
01-19
这个不是业务的要求，但是看到每次进入页面就重新渲染DOM然后再获取数据更新DOM，觉得作为一个前端工程师有必要优化下的加载逻辑，正好vue提供了keep-alive的功能，所以就试用了下。当然，干任何事儿都不会一帆风顺...
前端VUE权限管理（包含菜单权限和按钮权限），router.addRoutes根据后台接口传递数据生成动态路由
08-15
VUE-router.addRoutes根据后台接口传递数据生成动态路由，前端拿到配置并生成侧边栏-实现页面级权限控制。 ----------------------------------------------- 登陆成功之后直接由后端返回异步路由表，然后前端直接...
使用Vuex和导航守卫实现底部导航栏的显示和隐藏
见贤思齐
02-28 1243
使用Vuex和导航守卫实现底部导航栏的显示和隐藏 1.需求说明 要求在进入登录注册页面的时候底部导航栏不显示 2.问题分析 而底部导航栏是直接在App.vue根组件中使用的，登陆页也是通过路由显示在根组件上的，所以登录页没法传值直接控制底部导航栏的显示。 那么我能通过什么解决了，想到了！用vuex状态管理，开工！ 3.解决步骤 1.先用npm安装vuex 2.然后在src下创建文件夹store，创...
vue通过路由的meta属性来控制navbar和bar的显示隐藏
weixin_43837268的博客
11-26 1294
1.app.vue <template> <div id="app"> <router-view/> <FooterGuide v-show="$route.meta.showFooter"/> </div> </template> <script> import FooterGuide from './components/FooterGuide/FooterGuide.vue' ex
vue路由跳转的时候隐藏或去掉导航栏或者菜单栏
热门推荐
zyxczyf123的博客
03-31 1万+
我们在用路由跳转的时候发现，并不是每一个跳转页面都是有导航栏的，就比如，跳转登录页面的时候，底部的导航栏就会消失，以下提供两个能让导航栏消失的方法 第一种 使用v-show 1.给导航栏加上v-show的判断条件，$route可以获取meta中的信息，istrun是我们在路由中添加的一个变量（用来判断v-show成立的条件） <template> <div id="app"&...
vue中如何在登陆页面不显示导航栏
zzy的博客
07-18 3757
导航栏作为系统的通用组件，我并不想让其显示在登陆页面中，因此可以按照以下方法实现 1.将通用组件如导航栏等和放在一起 app.vue <div> <navigation v-if="!$route.meta.showNav"></navigation> <router-view /> </div> 2.其中route.meta.showNav是我加入路由中的信息 { path: '/', component: ()
vue 隐藏导航栏和菜单栏,已解决
最新发布
weixin_44006009的博客
03-22 556
vue 隐藏导航栏和菜单栏
Vue Router中两种常见的路由模式
weixin_55726815的博客
10-20 2737
在Vue中，路由重定向是指将一个路由路径重定向到另一个路由路径的行为。当用户访问某个特定的路由路径时，路由重定向将会自动将用户导航到预定义的目标路由路径上。路由重定向可以用于多种场景，例如：重定向到默认页面：当用户访问网站的根路径时，可以使用路由重定向将其自动重定向到应用程序的默认页面。重定向到登录页面：当用户访问需要登录的受保护页面时，可以使用路由重定向将其自动重定向到登录页面，以确保用户在访问受保护内容之前先进行身份验证。
Vue-cli实战项目14全局面包屑导航开发
weixin_42213903的博客
11-20 1012
文章目录上一章节面包屑导航基本实现通过路由数据生成完整代码下一章节 上一章节 Vue-cli实战项目13 分离全局配置 面包屑导航 使用Element 的 Breadcrumb 面包屑 组件来实现。 显示当前页面的路径，快速返回之前的任意页面。 Breadcrumb 面包屑API 基本实现 <el-breadcrumb separator-class="el-icon-arrow-righ...
vue侧边栏路由跳转
07-28
- *1* *2* [vue基于element路由侧边栏名字跳转](https://blog.csdn.net/m0_61686427/article/details/124437154)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值