这是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输入来检查路由是否发生。但无论哪种情况，都无法正常工作
我无法使用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>
通过使用这种方法，我在[email protected]中执行了路由