手机版

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

时间:2021-08-24 来源:互联网 编辑:宝哥软件园 浏览:

演示需求分析:

图中的菜单区域是标题公共组件。单击相应的菜单选项跳转到相应的路线,并在菜单的下部区域加载相应组件的内容。

下面两张图分别展示了点击“我的电站”和“个人中心”的效果

演示结构介绍:

登录成功后,跳转到索引页面,默认显示index/UserStation,其中index为组件,其他子菜单为组件,public header为组件。

路由配置代码:

标题组件键码:

基于Element-ui(只需注意红框):请参考Element-ui官网了解Element-ui知识。当调用handleSelect函数时,通知父组件道具中的活动已经更新。

index.vue

说明:表头组件在index.vue中引用,active传入表头组件,需要在子组件中修改,所以需要使用。sync实现标题组件和索引组件之间的道具共享,以及的相关知识。sync可以在vuejs官网查询。

路由器视图用于装载匹配的路由组件(如用户站的内容)。

观察活动的变化。当active发生变化时,将active的值推入路由,路由匹配实现页面切换。

注意:这个。$路由器。登录成功时推送(//Index/UserStation),所以进入index.vue时,默认会显示我的电站的菜单选项,路由默认为Index/user station。

摘要

如上所述,边肖推出的Vue2.0采用嵌套路由实现页面内容切换/通用一级菜单控制页面内容切换(推荐)。希望对大家有帮助。如果你有任何问题,请给我留言,边肖会及时回复你。非常感谢您对我们网站的支持!如果你觉得这篇文章对你有帮助,请转载,请注明出处,谢谢!

版权声明:Vue2.0采用嵌套路由实现页面内容切换/常用一级菜单控制页面内容切换(推荐)是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。