vue:路由嵌套时只有一个子路由时父级路由不显示问题

最新推荐文章于 2024-05-28 14:51:46 发布
原创 最新推荐文章于 2024-05-28 14:51:46 发布 · 3.5k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

在Vue-admin-beautiful后台管理模板中，遇到一个权限控制的难题：当父级路由仅有一个子路由时，父级路由不会显示。通过在父级路由配置`alwaysShow: true`，成功解决了这个问题，确保了即使只有一个子菜单，父级菜单也能在权限控制下正确显示。

我是在使用vue-admin-beautiful后台管理模板的项目中，在路由中使用权限控制路由（菜单）的显示。

父级路由（菜单）下有多个子路由（菜单）的父级都可以正常显示，只有父级下是一个子路由（菜单）的父级路由（菜单）不显示。因为只有一个子路由（菜单），是由父级隐藏不显示属性引起的。在父级设置alwaysShow: true，就可以保证在权限只有一个子菜单的父级显示。如下图：
在这里插入图片描述

详解vue路由篇(动态路由、路由嵌套)
12-08
`vue-router` 提供了嵌套路由的功能，允许我们将一个路由下的子路径映射到不同的组件。例如，当访问 `/RouterComponents/1` 时，`RouterComponents` 组件会被渲染，而在这个组件内部，还可以有一个或多个 `...
Vue三层嵌套路由的示例代码
08-27
在这个示例代码中，我们可以看到三个层次的路由：一级路由、二级路由和三级路由。每个路由都有其自己的模板、脚本和样式。 一级路由是 `/routers/1`，它包含三个二级路由：首页、新闻和娱乐。每个二级路由都有其...
Vue和Element实现菜单栏折叠与显示
SeedWJ的博客
08-26 2198
1.实现效果 点击前不折叠： 点击后折叠： 点击后会有一个折叠效果，只显示菜单图标，这里有一个bug–折叠后文字不显示问题，这个在文章末尾会详细说明。
vue:动态菜单只有一个子菜单时父级菜单不显示问题
tomorrownan的博客
10-29 8661
使用vue-admin-template后台管理模板的项目中使用了动态路由，就是显示后端接口返回的路由。第二次遇到父级菜单不显示的问题，第一次解决的方法没有记录，便又思考了一会。这里记录下。 父级菜单下有多个字菜单的父级都可以正常显示，只有父级下是一个子菜单的父级菜单不显示。所以断定是因为只有一个子菜单，父级隐藏不显示属性引起的。在处理从后台接口拿到的菜单数据时设置alwaysShow: true...
vue设置路由-当子路由只有一个，父路由无法显示
crystal_iwwish的博客
01-31 1766
父路由无法显示问题解决
iview-admin左侧菜单只有一个子菜单时，父级菜单不显示的问题
龘
07-13 469
//默认地址，根据这个地址找到这个js文件 src/components/main/components/side-menu/mixin.js 只要修改mixin.js中showChildren()中的判断条件就可以了 showChildren (item) { // 1（默认）改为0即可 return item.children && (item.children.length > 1 || (item.meta && ite
vue2 element-ui el-menu只有一个子菜单时 父菜单不加载问题解决(vue-element-admin&&vue-admin-template)
最新发布
qq_44776454的博客
05-28 1223
element-ui el-menu只有一个子菜单时 父菜单不加载问题解决(vue-element-admin&&vue-admin-template)
vue `npm run build`打包后的路由内组件不显示问题
qq_35457469的博客
08-28 2605
今天做项目的时候，碰到一个问题 很匪夷所思： 项目做好后进行npm run build打包项目，结果，出现的问题如下图： 下图是页面结构：可知 中间的 <router-view></router-view>部分内容根本就没有显示！！！！ 终于，经过仔细勘察，终于，被我知道了是什么原因 ~~~~~ 那是因为 mode:'history', 在 new Router({})...
vue router路由嵌套不显示问题的解决方法
08-30
首先，路由嵌套是Vue Router的一个重要特性，它允许我们将一个路由作为另一个路由的子路由。例如，我们可能有一个主路由`/parent`，并希望在其下创建一个子路由`/parent/child`。在路由配置中，这通常表现为： ```...
解决vue-router 嵌套路由没反应的问题
10-14
原因在于，Vue Router中的嵌套路由需要父路由有一个对应的组件，该组件中包含一个`<router-view>`标签，用于渲染子路由对应的组件。在原始的配置中，`/course`路由没有指定组件，因此Vue Router无法找到放置子路由...
vue3中解决子路由为1时父路由隐藏的问题
Hizeros的博客
07-16 894
当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式–如组件页面只有一个时，会将那个子路由当做根路由显示在侧边栏–如引导页面。
vue-element-admin的左侧路由栏最后一个路由显示不全
jjsmida1的博客
05-17 837
问题如下图 解决方法：找到src\layout\components\Sidebar\index.vue 在el-menu中添加style=“padding-bottom:20px"。如下图 <el-menu :default-active="activeMenu" :collapse="isCollapse" :background-color="variables.menuBg" :text-color="vari
vue-route中父路由没有component怎么办
云中客的博客
03-14 3894
可以在父路由中的component中写component:()=>import('@views/fillout')，就可以正常显示出子路由的内容，不然会发现页面中该是子路由显示内容的地方是空白的。 ...
解决路由跳转传参刷新页面后参数丢失
qq_42430038的博客
03-10 1245
1.路由配置 //：参数后不加？的话不传参就不能跳转该页面 2.跳转方法 3.跳到目的页后获取参数 this.$route.params获取的是一个对象，包含所有传过来的参数 再刷新页面就不会丢失参数了
Vue三层嵌套路由页面不显示问题，vue-element-admin三层路由显示空白
coderYYY的博客
11-18 3413
渲染不出来是因为第二层那里缺少一个容器，用一个组件专门用来渲染即可。
VUE 动态三级路由界面不显示
wang_nai_jun的专栏
09-06 5503
原因：三级（四级、五级、...）路由的父路由（父菜单、中间菜单、无实际打开页面的虚拟节点、非叶子节点）component缺项（null，未设置）导致。 解决：views下（放在这里引用路径简单）新建一个通用（可以到处使用）的vue文件，命名如SubView.vue，内容如下： <template> <router-view></router-view> </template> 各级父路由的component配置为SubView 即可。 如动态...
vue2+vue-router动态路由添加及路由刷新后消失的解决办法
weixin_44166849的博客
06-06 4435
vue-router动态路由添加及路由刷新后消失的解决办法
vue3 嵌套路由，页面不显示的问题
yn21296的博客
06-29 2480
实际上三级页面已经显示，但是被覆盖，所以需要再添加一个空页面用来展示三级页面。SubView.vue页面，也就是多加一个router-view。使用vue3嵌套路由时，三级路由url正确，页面不显示的问题。路径为 /home/task 但仍显示 Home页面。
vue-admin-template侧边栏二级菜单只有一个时父级菜单不显示的问题
weixin_44986077的博客
12-30 6037
最近进行项目收尾阶段，突然发现当侧边栏菜单只有一个二级菜单时一级菜单消失 网上搜了很多办法，修改Sidebar中的index.vue中的el-menu，将:unique-opened="true"改为true并给item上加上唯一的index，发现不生效，各种尝试后发现在permission.js中修改，代码如下： function filterAsyncRouter(asyncRouterMap) { const accessedRouters = asyncRouterMap.filter(rou
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值