如何用vue做一个二级联动
如何做一个像这样二级联动的目录？
先来说说重点和思路：重点在于router-view的使用以及vue-router的配置，思路是两层children的嵌套。
下面开始实现功能。
翻开我们的vue工程的，写好我们相应的组件，包括：
一级：活动activity、通知message、设置setting；
二级：活动中的：帖子minePost、回复mineReply等；
通知中的：回应mReply等；
设置只有一个，默认为setting
现在来看看我们的文件列表。
要实现这样的功能，我们要用好router-view。
我的一级导航用的是Tabs。
main.vue:
把router-view嵌套在TabPane中，注意这里的三个router-view是同一个，用来显示一级导航栏下方的内容，包括二级导航栏和内容。
接着是二级导航，用的是Menu，举个例子。
activity.vue:
注意这里又来了一个router-view，与上面的不同，这里用来显示右边的内容。
重点来了！开始写我们的router.js，配置vue-router。
我把整个页面命名为mine（我的），在main.vue中编写了头像、用户名等账户信息以及使用Tabs编写了一级目录（活动、通知、设置），注意到我的vue-router中main页面的默认显示为/mine/minePost，接着是mine页面的children的编写，即活动activity、通知message、个人设置setting，这三个组件只需要编写剩下的一级目录以下的内容了，在avtivity和message中又嵌套着children，并设置了默认路径，嵌套在children里的组件会在父组件的router-view中显示，各组件代码如下
mine.vue:
注意到mine.vue中tabPane中使用的三个router-view实际是同个区域
activity.vue:
message.vue:
minePost.vue:
这里只需要写显示在二级目录右边的相对应的内容即可
到此，大功告成
如何用vue做一个二级联动相关推荐
- vue 做一个定点地图的页面（定位到你想要的地点）
实例:如何用vue做一个定点地图的页面,进入一个地图,并且定位到你想要的地点. 这里举一个定点医院的例子. 在pages中添加一个vue页面为Hospital_map.vue,将该网页注册到路由src ...
- 使用vue做一个“淘宝“项目——3
做出分类页面 前言:做出首页,详细请看前两篇文章 1.使用vue做一个"淘宝"项目(做出首页) 2.使用vue做一个"淘宝"项目(显示商品栏) 目录: 创建项目 ...
- ❤️❌ 如何用vue制作一个探探滑动组件
前言 嗨,说起探探想必各位程序汪都不陌生(毕竟妹子很多),能在上面丝滑的翻牌子,探探的的堆叠滑动组件起到了关键的作用,下面就来看看如何用vue写一个探探的堆叠组件 ? 一. 功能分析 简单使用下探探会 ...
- VUE做一个公共的提示组件，显示两秒自动隐藏，显示的值父组件传递给子组件
需求:VUE做一个公共的提示组件,显示两秒自动隐藏,显示的值由父组件动态传给子组件. 效果图: 实现步骤: 1.创建一个子组件 Toptips.vue (它就是公共提示组件), optips.vue代 ...
- 如何用Excel做一个战斗模拟器(一)升级经验表
如何用Excel做一个战斗模拟器(二)属性表 如何用Excel做一个战斗模拟器(三)战斗过程模拟 目录索引 引言 确定战斗公式与怪物强度 确定人物升级经验 确定人物升级时间 确定升级所需经验 引言 作 ...
- 如何用Excel做一个战斗模拟器(三)战斗过程模拟
如何用Excel做一个战斗模拟器(一)升级经验表 如何用Excel做一个战斗模拟器(二)属性表 目录索引 定义战斗子过程 定位战斗双方基础属性 利用基础属性与战斗公式进行计算 战斗过程的运算与输出 判 ...
- android 画笔压痕效果,【自制样机教程】如何用Ps做一个压痕效果的Logo样机
原标题:[自制样机教程]如何用Ps做一个压痕效果的Logo样机 上次教你们做的自制小糖袋的 贴图样机 不知道你们玩耍的咋样 今天再给你们介绍一个logo的样机 这次的教程主要用到了图层样式 来看看怎么 ...
- 如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
- 【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
最新文章
- 资源盗链困扰站长 安全狗内置盗链保护功能
- html响应式导航栏制作,用Sass制作响应式导航栏(原创)
- 树状数组求区间和模板 区间可修改 参考题目：牛客小白月赛 I 区间
- navicat 怎么调试存储过程_Navicat 执行存储过程
- 021：自定义path（或url）转换器
- 轮廓检测_轮廓检测| Richer Convolutional Features | CVPR | 2017
- 在家办公这半年，让我开始热爱生活
- java 自定义报表_灵活数据分析 | 自定义数据分析_集力数据系统平台_Java报表系统软件...
- Win7家庭版启用Administrator账户
- Python自动化开发学习的第四周------函数进阶
- L007-oldboy-mysql-dba-lesson07
- Javascript特效：电商商品展示放大镜
- 我们在 web 应用开发过程中经常遇到输出某种编码的字 符， 如 iso8859-1 等， 如何输出一个某种编码的字符串？...
- linux输出文件内容ssh,Linux ssh ubuntu终端把运行过程输出到文件？
- 聊聊flink JobManager的High Availability
- 语音识别基本原理介绍------dnn-hmm续
- 操作 神通数据库_神通数据库安装及操作笔记
- 微信小程序 图片处理的几个样式
- 两个故事理解时间管理的必要
- 完全用Linux：半年来，Linux高效完成我所有的工作！（转贴）