使用上一篇文章搭好的主框架,用ElementUI Tabs 显示网页。
1、vue 组件里html 写法
一种大部分是在js文件 或 .vue 文件,用template: '' 。 这种方法html 如果内容多不好写,也不容易调试
一种是可以在Html 文件或在cshtml 文件里 用 script标签 type类型是 type=text/template,这种方法跟正常的HTML代码一样 ,选用这种写法搭框架
2、添加elementUI tabs 标签
在主页初始化Tabs 标签所需要的变量
添加tabs 标签,添加div 定义id,div里是保存从后端加载的网页,在用component动态组件显示
在导航添加加载网页事件
定义打开网页事件,先判断当前的tabs是否已经加载,如果已加载**当前tabs选项卡,如果不存在访问服务器获取,保存在tabs定义的div里,name要跟定义的组件名称一致,用eval 字符串转变量赋值给tabs标签里的动态组件显示网页。
关闭tabs选项卡事件
在控制器修改网页路径
定义网页 组件名称要跟Menu 类的 name 一致
实现效果
动态路由加载网页
同时存在多个网页
关闭、选择tabs 选项卡,左侧导航跟**的选项卡相对应的导航高亮颜色
源码
csdn
https://download.csdn.net/download/awei0130/11186869