Question

希望有人可以帮助我更好地理解使用带聚合物的app-router。我有以下文件 - index.html，app.html和updates.html。

当我导航到域的根目录时出现主要布局时，所有内容都正常工作但内容区域中没有任何内容出现在我尝试使用app-router元素呈现updates.html文件的内容

非常感谢任何帮助

的index.html

<html>
<head>
  <title>Example App</title>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">

  <link rel="stylesheet" href="styles/main.css">

  <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
  <link rel="import" href="elements/app.html">
</head>

<body fullbleed unresolved>
  <example-app></example-app>
</body> 
</html>

app.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-icons/core-icons.html">
<link rel="import" href="../bower_components/core-item/core-item.html">
<link rel="import" href="../bower_components/core-scaffold/core-scaffold.html">
<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../bower_components/core-menu/core-menu.html">
<link rel="import" href="../bower_components/app-router/app-router.html">

<polymer-element name="example-app">
  <template>
    <core-scaffold id="scaffoldPanel">
      <core-header-panel navigation flex>
        <core-toolbar id="navheader" class="tall">
          <img class="middle profile" src="../images/main-carer.png">
        </core-toolbar>
      </core-header-panel>

      <core-toolbar tool flex>
        <div id="main-title" flex><a href="index.html">Example App</a></div>
          <core-icon icon="search"></core-icon>
      </core-toolbar>

      <div class="content">
        <app-router>
          <app-route path="/" import="elements/updates.html" element="app-updates"></app-route>
        </app-router>
      </div>

    </core-scaffold>
  </template>
</polymer-element>

updates.html

<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="app-updates">
  <template>
      <div vertical layout style="height:50px;">
         <div flex class="home-update-menu"><h4>UPDATES</h4></div>
      </div>

      <div>Updates appear here</div>
  </template>
</polymer-element>

聚合物app-router问题

0 个答案: