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

最新推荐文章于 2024-06-25 15:22:18 发布

Mute_IT

最新推荐文章于 2024-06-25 15:22:18 发布

阅读量1.2k

点赞数 1

文章标签：前端 html elementui vue.js

本文链接：https://blog.csdn.net/qq_41300934/article/details/130218577

版权

对于HTML项目，可以通过使用 <iframe> 标签来实现类似于路由嵌套的方式。

具体实现步骤如下：

创建一个 HTML 页面，包含 <el-container> 和 <el-main> 标签。这个 HTML 页面作为布局组件，用来包装其他页面内容。

<!-- layout.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Layout</title>
  <!-- 引入必要的 CSS 和 JS 文件 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
  <div id="app">
    <el-container>
      <el-header>头部内容</el-header>
      <el-main>
        <iframe :src="url"></iframe>
      </el-main>
      <el-footer>底部内容</el-footer>
    </el-container>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        url: ''
      },
      created: function() {
        // 在此处设置 iframe 的默认 URL 地址
        this.url = 'home.html'
      }
    })
  </script>
</body>
</html>

对于每个子页面，你可以创建一个单独的 HTML 文件，例如 home.html、about.html、contact.html 等，并将它们嵌套在布局组件的 <el-main> 标签中。

例如：

<!-- home.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Home</title>
</head>
<body>
  <h1>首页</h1>
  <p>这里是主页的内容</p>
</body>
</html>

<!-- about.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>About</title>
</head>
<body>
  <h1>关于我们</h1>
  <p>这是关于我们的内容</p>
</body>
</html>

<!-- contact.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Contact</title>
</head>
<body>
  <h1>联系我们</h1>
  <p>这里是联系我们的内容</p>
</body>
</html>

最后，在主页面中引入布局组件即可。

<!-- main.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Main</title>
  <!-- 引入必要的 CSS 和 JS 文件 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
  <div id="app">
    <layout></layout>
  </div>

  <script>
    Vue.component('layout', {
      template: '<iframe src="layout.html"></iframe>'
    })

    var app = new Vue({
      el: '#app'
    })
  </script>
</body>
</html>

通过以上方法，你可以使用 iframe 标签来实现路由嵌套的效果，将每个页面内容放在同一个 <el-main> 标签中，而且这种方式也更加灵活，适用于 HTML 项目。

Mute_IT

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
通过iframe实现纯html使用elementUI布局的路由嵌套

标签中，而且这种方式也更加灵活，适用于 HTML 项目。标签来实现路由嵌套的效果，将每个页面内容放在同一个。标签来实现类似于路由嵌套的方式。对于HTML项目，可以通过使用。通过以上方法，你可以使用。
复制链接

扫一扫