通过iframe实现纯html使用elementUI布局的路由嵌套

这篇文章距离上次修改已过429天，其中的内容可能已经有所变动。

要通过iframe实现使用Element UI布局的路由嵌套，你需要创建一个父页面，在其中使用Element UI进行布局，并在布局的某个区域使用iframe来嵌套子页面。子页面将是普通的Vue组件，使用Vue Router进行路由管理。

以下是一个简单的例子：

父页面（parent.html）:




<!DOCTYPE html>
<html>
<head>
  <!-- 引入Element UI的CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <style>
    .el-header, .el-footer {
      background-color: #B3C0D1;
      color: white;
      text-align: center;
      line-height: 60px;
    }
 
    .el-aside {
      background-color: #D3DCE6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }
 
    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 160px;
    }
  </style>
</head>
<body>
<div id="app">
  <el-container>
    <el-header>Header</el-header>
    <el-container>
      <el-aside width="200px">Aside</el-aside>
      <el-main>
        <iframe src="child.html" width="100%" height="100%"></iframe>
      </el-main>
    </el-container>
    <el-footer>Footer</el-footer>
  </el-container>
</div>
<script>
  new Vue({
    el: '#app',
    components: {
    }
  })
</script>
</body>
</html>

子页面（child.html）:




<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      height: 100%;
    }
  </style>
</head>
<body>
<div id="app">
  <router-view></router-view>
</div>
<script>
  const ChildPage = {
    template: `<div>This is a child page</div>`
  };
 
  const router = new VueRouter({
    routes: [
      { path: '/', component: ChildPage }
    ]
  });
 
  new Vue({
    el: '#app',
    router
  });
</script>
</body>
</html>

在这个例子中，父页面使用了Element UI的布局组件，并在主要内容区域（<el-main>）使用了<iframe>嵌套了子页面。子页面是一个普通的Vue应用，使用Vue Router进行路由管理。这

通过iframe实现纯html使用elementUI布局的路由嵌套

评论已关闭

推荐阅读