vue实现未知层数嵌套导航

最新推荐文章于 2023-07-28 21:28:58 发布
VIP文章 最新推荐文章于 2023-07-28 21:28:58 发布
阅读量860 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39063831/article/details/89708166
版权

小伙伴们，你们在做前端的时候，有没有过这种需求， 做一个竖向导航栏，但是导航下有多少层折叠却不知道，需要后台返回之后渲染的情况，如图

如上图展示，分组一下只有一层 ，就是选项1和选项2，但是在分组2下，嵌套了两层，即选项4下还有一层，这个图只是嵌套两层，但是现实项目中甚至有可能嵌套十几层，那这种情况怎么办呢

下面我用VUE来做个例子，最后效果如图

我这个效果是写死了数据嵌套了4层 ，使用的时候只需要接到后台返回数据上就可以了

下面上代码：

最低0.47元/天 解锁文章
魔莫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
VUE多层路由嵌套实现代码
08-30
主要为大家详细介绍了VUE多层路由嵌套的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue组件的嵌套实践——菜单功能
m0_53077733的博客
04-21 1105
vue中关于组件的层层嵌套
Vue3开发——Ant Design Vue 实现多级嵌套菜单
z止于至善的博客
03-28 1387
组件开发，需要对后台返回的菜单数据进行展示，菜单级数不确定，因此，需要实现一个多级嵌套的菜单组件。菜单数据结构，可以嵌套任意层。
vue2自定义菜单循环嵌套
最新发布
weixin_40444253的博客
07-28 146
vue2自定义菜单循环嵌套。
Vue笔记_05（嵌套路由，一级菜单实现）
weixin_53402317的博客
10-16 1637
vue笔记，嵌套路由，一级菜单实现
关于vue优雅地使用ElementUI以及Ant-Design-Vue等UI框架的n层嵌套菜单设计
weixin_39573946的博客
07-27 427
关于vue优雅地使用ElementUI以及Ant-Design-Vue等UI框架的n层嵌套菜单设计
Vue三层嵌套路由的示例代码
08-27
本篇文章主要介绍了Vue三层嵌套路由的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue实现路由跳转和嵌套
12-08
 用 vue-cli 创建的初始模板里面，并没有 vue-router，需要通过 npm 安装 cnpm i vue-router -D 安装完成后，在 src 文件夹下，创建一个 routers.js 文件，和 main.js 平级 然后在 router.js 中引入所需的组件，...
在vue中实现嵌套页面(iframe)
11-19
vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/… <iframe src=”../../static/plusPro.html” width=”1200″ height=”300″ frameborder=”...
vue渲染未知层级的单一结构列表
weixin_51364599的博客
03-17 400
数据： listData: [ { title: "hahah", content: "hahahahah", children: [{ title: "hahah", content: "hahahahah" }] }, { title: "hahah", content: "hahahahah", children: [
Vue实现动态路由导航
不愧是暮言的博客
02-11 1604
对于路由的导航动态实现，我们首先要确定我们拥有的路由有哪些，并且对于命名有一定的良好习惯。其中最重要的就是在我们的路由里面进行设定，设置我们的路由守卫，能对路由进行控制和及时的更新我们的路由数据，然后就可以直接在功能实现区域进行调用实现了 2.store文件夹 3.main.js 4.实现 ⛵小结 以上就是对Vue实现路由导航简单的概述，使得我们的项目更加的趋于完美，也提升了我们对于编程的能力和思维！
【vue导航菜单嵌套循环组件】
weixin_45926099的博客
07-15 1033
vue导航菜单嵌套循环组件
vue后台管理系统多级路由嵌套实现侧导航
我的个人博客
10-11 5263
vue后台管理系统多级路由嵌套实现侧导航,点击一级菜单展开二级菜单，点击二级菜单展开三级菜单，点击三级菜单跳转到相应的路由
vue 动态多级导航菜单
LONGLONGAGO_RU的博客
11-12 3065
1，创建vue的左侧导航栏组件 <template> <div> <!-- 根据实际情况做修改 --> <el-menu-item v-for="(item,index) in navlist" :key="index" v-if="item.adminMenu.menuType =='page'" ...
vue管理系统多级路由嵌套实现侧导航
前端开发工程师
12-15 1833
大概效果图是这样的。 项目目录： 创建一个navData.js存放路由菜单信息，模拟访问后台接口返回的数据，navData.js中数据如下： export default [ {name: 'formapply',title: '表单申请',path: '/formapply',component: 'FormApply', children: [ { name: 'formapply1', title: '表单申请1',...
Vue：二级路由，导航守卫（导航钩子）
洪布斯的博客
12-24 523
二级路由，导航守卫（导航钩子）： import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [{ path: '/', name: 'home', component:...
vue.js多层嵌套列表渲染
银鞍照白马的博客
12-25 5956
简单利用vue实现多层嵌套列表渲染效果图如下 效果图如下 html部分 &lt;ul&gt; &lt;template v-for="(item, index) in wjList"&gt; &lt;li class="voteList-li" v-for="newItem in item" v-on:click="addClassFun(index)"&gt;
Vue Router怎么实现页面嵌套
05-17
Vue Router 可以通过嵌套路由来实现页面嵌套。具体步骤如下： 1. 在路由配置文件中定义父子路由关系。例如，父路由为 `/home`，子路由为 `/home/child`： ```javascript const routes = [ { path: '/home', component: Home, children: [ { path: 'child', component: Child } ] } ] ``` 2. 在父组件中添加 `<router-view>` 标签，用来渲染子组件： ```html <template> <div> <h1>Home Component</h1> <router-view></router-view> </div> </template> ``` 3. 在子组件中添加嵌套路由的链接，例如： ```html <template> <div> <h2>Child Component</h2> <router-link to="/home/child">Go to Child Component</router-link> </div> </template> ``` 这样，当用户访问 `/home` 路由时，会渲染 Home 组件，并在其内部的 `<router-view>` 标签中渲染 Child 组件。同时，当用户点击子组件中的链接时，会根据路由配置自动跳转到 `/home/child` 路由，并渲染 Child 组件。这就实现了页面嵌套的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值