Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)


Posted in Javascript onMay 08, 2019

demo需求分析:

图中菜单区域为header公用组件,点击相应的菜单选项跳转到对应的路由,在菜单下区域加载相应组件的内容。

以下两图分别为点击“我的电站”、“个人中心”的效果

demo结构介绍:

登录成功后,跳转到index页面,并默认显示index/UserStation(我的电站),index为一个组件,其他各个子菜单为一个组件,公共header为一个组件。

Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)

Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)

路由配置代码:

Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)

header组件关键代码:

基于Element-ui(只需要留意红框部分):Element-ui知识请参考Element-ui官网,handleSelect函数调用时,告知父组件props中的active已经更新。

Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)

index.vue

解释:index.vue中引用header组件,并向header组件传入active,此active在子组件中需要被修改,因此需要使用.sync实现props在header组件与index组件中共享,.sync相关知识可查询vuejs官网。

router-view用于挂载匹配到的路由组件(比如:UserStation的内容)。

观察active的变化,当active变化时,push active的值到路由中,路由匹配到实现页面切换。

Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)

注:登录成功时this.$router.push('/Index/UserStation'),所以进入index.vue时,默认显示我的电站菜单选项,路由默认为Index/UserStation。

总结

以上所述是小编给大家介绍的Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript 进度条 实现代码
Jul 30 Javascript
JQ获取动态加载的图片大小的正确方法分享
Nov 08 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
bootstrap table sum总数量统计实现方法
Oct 29 Javascript
Angular自定义组件实现数据双向数据绑定的实例
Dec 11 Javascript
vue+axios+mock.js环境搭建的方法步骤
Aug 28 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 Javascript
Typescript的三种运行方式(小结)
Sep 18 Javascript
vue实现菜单切换功能
May 08 #Javascript
浅谈JS的原型和继承
May 08 #Javascript
vue使用vuex实现首页导航切换不同路由的方法
May 08 #Javascript
微信小程序封装自定义弹窗的实现代码
May 08 #Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 #Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 #Javascript
js实现继承的方法及优缺点总结
May 08 #Javascript
You might like
php恢复数组的key为数字序列的方法
2015/04/28 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
PHP魔术方法以及关于独立实例与相连实例的全面讲解
2016/10/18 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
简单谈谈PHP面向对象之标识对象
2017/06/27 PHP
PHP高精确度运算BC函数库实例详解
2017/08/15 PHP
JavaScript 捕获窗口关闭事件
2009/07/26 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
基于React.js实现原生js拖拽效果引发的思考
2016/03/30 Javascript
一览画面点击复选框后获取多个id值的方法
2016/05/30 Javascript
D3.js实现饼状图的方法详解
2016/09/21 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
微信小程序tabBar底部导航中文注解api详解
2017/08/16 Javascript
Angular中封装fancyBox(图片预览)遇到问题小结
2017/09/01 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
JS打印彩色菱形的实例代码
2018/08/15 Javascript
详解vuex之store拆分即多模块状态管理(modules)篇
2018/11/13 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
关于JavaScript中异步/等待的用法与理解
2020/11/18 Javascript
跟老齐学Python之Python安装
2014/09/12 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
python抽取指定url页面的title方法
2018/05/11 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
python如何调用百度识图api
2020/09/29 Python
浅谈html5增强的页面元素
2016/06/14 HTML / CSS
英国办公用品商店:Office Outlet
2018/04/04 全球购物
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
酒店保洁主管岗位职责
2013/11/28 职场文书
班级活动策划书
2014/02/06 职场文书
党日活动总结
2014/05/07 职场文书
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android