Polymer1.0 应用路由器不工作。路由没有发生

Question

这是index.html文件。默认情况下，最初呈现此页面。然后我想导航到其他页面。但这并没有发生。

<!DOCTYPE html> 
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home | Routing</title>

    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

    <link rel="import" href="./bower_components/app-router/app-router.html" />
    <link
      rel="import"
      href="./bower_components/pushstate-anchor/pushstate-anchor.html"
    />
  </head>

  <body>
    <a is="pushstate-anchor" href="/student">student</a>
    <a is="pushstate-anchor" href="/teacher">teacher</a>
    <a is="pushstate-anchor" href="/example">example</a>

    <dom-bind>
      <template>
        <app-router>
          <app-route path="/" import="/pages/home-element.html"></app-route>
          <app-route
            path="/student"
            import="/pages/student-element.html"
          ></app-route>
          -->

          <app-route
            path="/teacher"
            import="/pages/teacher-element.html"
          ></app-route>
          <app-route path="/example">
            <template>
              <p>Inline template FTW!</p>
            </template>
          </app-route>
          <app-route path="*" import="./PageNotFound.html"></app-route>
        </app-router>
      </template>
    </dom-bind>
  </body>
</html>

我正在尝试执行路由，但它不起作用。我尝试使用 URL 的锚标记和手动 URL 输入来检查路由是否发生。但无论哪种情况，它都不起作用

Answer 1

我无法使用 app-router 执行路由。但是我找到了使用 more-routing.

的解决方案

包括依赖项

<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/core-pages/core-pages.html" />
<link rel="import" href="bower_components/more-routing/more-routing.html" />

index.html 文件正文

<body>
    <!-- Routing configuration and path set -->
    <more-routing-config driver="hash"></more-routing-config>
    <more-route name="home" path="/"></more-route>
    <more-route name="students" path="/students"> </more-route>
    <more-route name="teachers" path="/teachers"></more-route>

    <!-- Visual Contents -->
    <template is="auto-binding" id="app">
      <more-route-selector>
        <!-- Navigation Links -->
        <a href="{{urlFor('home')}}">Home</a>
        <a href="{{urlFor('students')}}">Students</a>
        <a href="{{urlFor('teachers')}}">Teachers</a>
      </more-route-selector>
      <main>
        <more-route-selector selectedParams="{{params}}">
          <!-- Content set for different pages -->
          <core-pages>
            <section route="home">
              <h1>Home</h1>
              <div>This is the home section</div>

              <h2>Routing with Web Components!</h2>
            </section>

            <section route="students">
              <h1>Student Database</h1>
              <div>
                <p>Name : <b>Student1</b></p>
                <p>Mark : 80</p>
                <p>Department : Science</p>
              </div>
              <br />
              <div>
                <p>Name : <b>Student2</b></p>
                <p>Mark : 70</p>
                <p>Department : Maths</p>
              </div>
              <br />
              <div>
                <p>Name : <b>Student3</b></p>
                <p>Mark : 60</p>
                <p>Department : English</p>
              </div>
            </section>

            <section route="teachers">
              <h1>Teachers Database</h1>
              <div>
                <p>Name : <b>Staff1</b></p>
                <p>Department : Science</p>
              </div>
              <br />
              <div>
                <p>Name : <b>Staff2</b></p>
                <p>Department : Maths</p>
              </div>
              <br />
              <div>
                <p>Name : <b>Staff3</b></p>
                <p>Department : English</p>
              </div>
            </section>
          </core-pages>
        </more-route-selector>
      </main>
    </template>
  </body>

通过使用这种方法，我在 Polymer@1.0.0 中执行了路由

Polymer1.0 应用路由器不工作。路由没有发生

Polymer1.0 app-router not working. Routing is not happening

routes

polymer

polymer-1.0