element iframe
时间: 2023-08-19 08:06:22 浏览: 51
Element UI中的iframe是指在路由中添加一个路由元信息,并新增一个路由用于测试iframe使用。在菜单中添加一个新的菜单项,点击该菜单项时会跳转到iframe页面。具体实现步骤如下:
Step1:在路由中添加一个路由元信息,并新增一个路由用于测试iframe使用。其中iframeUrl用于表示url,使用http或者https开头的url使用iframe标签展示。
```javascript
{
path: '/demo/iframe',
name: 'Iframe',
meta: {
isRouter: true,
iframeUrl: 'https://passport.csdn.net/newlogin?code=mobile'
}
}
```
Step2:在页面中准备一个div标签包裹iframe,并在每次加载新页面时使用新建立的iframe覆盖,以达到重新加载的目的。
Step3:在菜单中添加一个新的菜单项,点击该菜单项时使用$router.push方法跳转到Iframe页面。
```html
<el-menu-item index="demo-iframe" @click="$router.push({ name: 'Iframe' })">
<i class="el-icon-document"></i>
<span slot="title">iframe</span>
</el-menu-item>
```
通过以上步骤,可以在Element UI中使用iframe来展示指定的网页内容。
#### 引用[.reference_title]
- *1* *3* [Vue + ElementUI 实现后台管理系统模板 -- 前端篇(九):使用 iframe 标签嵌套页面 及内容顶部tab页签](https://blog.csdn.net/hongc93/article/details/121858770)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [vue + element 使用 iframe](https://blog.csdn.net/qq_35170213/article/details/80841766)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]