我搜索了很多教程和所有关于 App router 的文档，我在 https://erikringsmuth.github.io/app-router/ 尝试了指南但我不明白如何在不重新加载另一个的情况下在 div 中加载 HTML 页面。我知道这是用 AJAX 做的，但是用不同的聚合物，怎么办？。这是我的 index.html 文件的代码:
<!DOCTYPE html>
<html>
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-toolbar/paper-toolbar.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-icon/iron-icon.html">
<link rel="import" href="bower_components/paper-drawer-panel/paper-drawer-panel.html">
<link rel="import" href="bower_components/paper-menu/paper-menu.html">
<link rel="import" href="bower_components/paper-menu/paper-submenu.html">
<link rel="import" href="bower_components/paper-item/paper-item.html">
<link rel="import" href="bower_components/iron-collapse/iron-collapse.html">
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/paper-styles/typography.html">
<link rel="import" href="bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="bower_components/iron-ajax/iron-request.html">
<link rel="import" href="bower_components/app-router/app-router.html">
<link rel="import" href="bower_components/pushstate-anchor/pushstate-anchor.html">
<link rel="import" href="bower_components/iron-pages/iron-pages.html">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Reino Unido</title>
</head>
<body>
<paper-drawer-panel>
<div drawer class="menu">
<paper-toolbar class="drawer">
<span>Reino Unido</span>
</paper-toolbar>
<paper-menu class="list">
<paper-item>
<iron-icon icon="home"></iron-icon><span class="Menu"><a href="index.html">Inicio</a></span></paper-item>
<paper-item>
<iron-icon icon="shopping-cart"></iron-icon><span class="Menu"><a href="#/catalogo">Catálogo</a></span></paper-item>
<paper-item>
<iron-icon icon="star"></iron-icon><span class="Menu"><a href="#/promociones.html">Promociones</a></span></paper-item>
<paper-item>
<iron-icon icon="drafts"></iron-icon><span class="Menu"><a href="#/contacto.html">Contáctanos</a></span></paper-item>
<paper-item>
<iron-icon icon="info"></iron-icon><span class="Menu">Acerca de</span></paper-item>
</paper-menu>
</div>
<div main class="page">
<paper-toolbar class="main">
<paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
<span title class="flex">Inicio</span>
<paper-icon-button icon="refresh"></paper-icon-button>
</paper-toolbar>
<div id="sections">
Here I want to load HTML pages
</div>
</div>
</paper-drawer-panel>
<app-router>
<app-route path="/catalogo" import="catalogo.html"></app-route>
</app-router>
</body>
</html>应用程序看起来像:
最佳答案
您可以将每个页面创建为网络组件，然后将自定义元素标签放入 div 中。 这种方式将使您的代码非常干净和易于理解。
关于html - Polymer 1.0 app路由，在div内加载外部页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34969988/