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
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 Polymer@1.0.0