使用上一篇文章搭好的主框架,用ElementUI  Tabs 显示网页。

1、vue 组件里html 写法

一种大部分是在js文件 或 .vue 文件,用template: '' 。 这种方法html 如果内容多不好写,也不容易调试

.net core Vue ElementUI (2) Tabs 动态路由显示网页

一种是可以在Html 文件或在cshtml 文件里 用 script标签 type类型是 type=text/template,这种方法跟正常的HTML代码一样 ,选用这种写法搭框架

.net core Vue ElementUI (2) Tabs 动态路由显示网页

 

2、添加elementUI tabs 标签

在主页初始化Tabs 标签所需要的变量

.net core Vue ElementUI (2) Tabs 动态路由显示网页

 

添加tabs 标签,添加div  定义id,div里是保存从后端加载的网页,在用component动态组件显示

.net core Vue ElementUI (2) Tabs 动态路由显示网页

 

在导航添加加载网页事件

.net core Vue ElementUI (2) Tabs 动态路由显示网页

 

定义打开网页事件,先判断当前的tabs是否已经加载,如果已加载**当前tabs选项卡,如果不存在访问服务器获取,保存在tabs定义的div里,name要跟定义的组件名称一致,用eval 字符串转变量赋值给tabs标签里的动态组件显示网页。

.net core Vue ElementUI (2) Tabs 动态路由显示网页

关闭tabs选项卡事件

.net core Vue ElementUI (2) Tabs 动态路由显示网页

在控制器修改网页路径

 

.net core Vue ElementUI (2) Tabs 动态路由显示网页

 

定义网页 组件名称要跟Menu  类的 name 一致

.net core Vue ElementUI (2) Tabs 动态路由显示网页

实现效果

动态路由加载网页

同时存在多个网页

关闭、选择tabs 选项卡,左侧导航跟**的选项卡相对应的导航高亮颜色

 

.net core Vue ElementUI (2) Tabs 动态路由显示网页

 

源码

csdn

https://download.csdn.net/download/awei0130/11186869

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-11-08
  • 2021-08-05
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-04-14
  • 2021-12-04
  • 2021-11-15
  • 2022-02-09
相关资源
相似解决方案