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 相关文章推荐
html下载本地
Jun 19 Javascript
扩展jquery实现客户端表格的分页、排序功能代码
Mar 16 Javascript
js渐变显示渐变消失示例代码
Aug 01 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
jquery ajax 调用失败的原因示例介绍
Sep 27 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
Jul 12 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
vue拦截器实现统一token,并兼容IE9验证功能
Apr 26 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
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的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
php设置允许大文件上传示例代码
2014/03/10 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
javascript 节点排序 2
2011/01/31 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
无刷新预览所选择的图片示例代码
2014/04/02 Javascript
jquery datatable后台封装数据示例代码
2014/08/07 Javascript
js实现iframe跨页面调用函数的方法
2014/12/13 Javascript
JS动态改变浏览器标题的方法
2016/04/06 Javascript
javascript函数的四种调用模式
2017/01/08 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
2017/02/15 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
微信小程序分页加载的实例代码
2017/07/11 Javascript
javascript 跨域问题以及解决办法
2017/07/17 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
浅谈vue首屏加载优化
2018/06/28 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
python使用代理ip访问网站的实例
2018/05/07 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
pandas和spark dataframe互相转换实例详解
2020/02/18 Python
Python类的动态绑定实现原理
2020/03/21 Python
python实现猜数游戏
2020/03/27 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
大学毕业感言
2014/01/10 职场文书
乡镇消防安全责任书
2014/07/23 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
材料采购员岗位职责
2015/04/03 职场文书
草房子读书笔记
2015/06/29 职场文书