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

Question

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

27 Views Asked by Dificilcoder At 14 May 2020 at 12:41

This is the index.html file. By default, this page is rendered initially. Then I want to navigate to other pages. But that's not happening.

<!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>

I am trying to perform routing but it's not working. I tried using both anchor tag for URL and manual URL entering to check whether routing happens or not. But in either case, it's not working

Original Q&A

There are 1 best solutions below

**Dificilcoder** · Accepted Answer · 2020-05-24T11:50:17.607000

I am not able to perform routing using app-router. But I found a solution using more-routing.

Include dependencies

<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" />

Body of index.html file

<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>

By using this approach, I performed routing in [email protected]

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

There are 1 best solutions below

Related Questions in ROUTES

Related Questions in POLYMER

Related Questions in POLYMER-1.0

Trending Questions

Popular # Hahtags

Popular Questions