Polymer 1.0 - 路由

Question

我是 Polymer 的新手。我开始写一个简单的网络应用程序，其中 1. 用户首先登陆登录页面 2. 如果用户通过登录，则将用户引导至内容页面

我写一个元素"login"

<dom-module id="login">
  <template>
    <!-- local DOM for your element -->
    <p>Username</p>
    <input class="paper-font-body2" value="{{email::change}}" type="email">
    <br/>
    <p>Password</p>
    <input class="paper-font-body2" value="{{password::change}}" type="password">
    <p>{{errorMessage}}</p>

    <iron-ajax
      id="ajax"
      url=""
      method="POST"
      on-response="signInResponse"
      debounce-duration="300">
    </iron-ajax>

    <button on-click="signIn">Signin</button>
  </template>
</dom-module>

<script>
  // element registration
  Polymer({
    is: "login",

    // add properties and methods on the element's prototype
    properties: {
      // declare properties for the element's public API
      email: {
        type: String,
        value: "username"
      },
      password: {
        type: String,
        value: "password"
      },
      errorMessage: {
        type: String,
        value: ""
      }
    },

    signIn: function() {
      this.$.ajax.url = "http://myserver/login/email";
      this.$.ajax.params = {"email":this.email, "password": this.password};
      this.$.ajax.generateRequest();
    },

    signInResponse: function(request) {
      response = request.detail.response;
      console.log(response);
      if (response.code == '0') {
        this.fire("signin-success", response);
      } else {
        this.fire("signin-fail", response);
      }
    }
  });
</script>

在 index.html（主页）上，我使用

<self-login
      sign-in-success="onSignedIn"
      ></self-login>

问题：在 onSignedIn() 回调中，我会将我的页面路由到 /content。我该怎么办？

编辑 1：正如@zacharytamas 所建议的，我尝试按以下方式使用 app-router

index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <title>app-router</title>
  <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="stylesheet" href="styles/main.css" shim-shadowdom>
  <link rel="import" href="../bower_components/app-router/app-router.html">
</head>
<body unresolved>
<app-router>
  <app-route path="/" import="/elements/home-page.html"></app-route>
  <app-route path="/test" import="/elements/home-page.html"></app-route>
  <app-route path="*" import="/elements/not-found-page.html"></app-route>
</app-router>

<script src="scripts/app.js"></script>

</body>
</html>

首页-page.html

<dom-module  id="home-page" noscript>
  <template>
    <h2>Hello</h2>
  </template>
</dom-module>

当我浏览 Chrome 上的两个 http://localhost:3000/ and http://localhost:3000/test 时，它显示一个空白页面。有什么想法吗？

Answer 1

Polymer 默认没有内置路由。但是，有几个前端路由框架可以与 Polymer 一起使用。

一种非常常用的方法是称为 app-router, which lets you define routes declaratively with just HTML alone. I've had some success with it before. Check out the website 的自定义元素，以获取有关设置它的信息。

另一种基于 HTML 的方法是由 Polymer 团队成员 more-routing. Google has a video series about Polymer called Polycasts which made a video explaining the more-routing approach 制作的自定义元素。您应该查看该视频以了解有关入门的信息。

另一种选择是通过 JavaScript 使用 page.js framework. This is the method used the Polymer Starter Kit. Here's another Polycast 开始。

欢迎来到 Polymer 世界！

Answer 2

尝试使用 'dna-router'。它相对较新，支持 Polymer-1.0。您可以纯粹在 html.

中创建路由

Dna-router 还支持用户身份验证。您可以在其 'dna-config' 元素中传递登录状态和登录数据。路由器将根据登录状态显示页面。您可以声明哪些状态需要用户认证。

它仍在开发中并且有一些小问题。但值得一试。

Github: https://github.com/Saquib764/dna-router/

Answer 3

答案取决于您使用的路由器类型。我对 Polymer 路由器的状态不满意，所以我写了 excess-router。使用此路由器，您将：

定义你的路线，并使/content成为默认路线
将路由器配置为手动启动
登录时手动启动路由器

<excess-router-config manual-start></excess-router-config>
<excess-route route="/content"></excess-route>
<excess-route route="/(.*)" redirect-to="/content" activation-modifiers="x"></excess-route>

<script>
  function onSignedIn() {
    Excess.RouteManager.start();
  }
</script>

Answer 4

我只是在页面模板中添加以下代码来解决这个问题：

<script>
    Polymer({
        is: 'home-page'
    });
</script>

整页代码：

<link href="../bower_components/polymer/polymer.html" rel="import">
<dom-module id="home-page">
   <template>
      <div>Home page</div>
   </template>

   <script>
      Polymer({
         is: 'home-page'
      });
   </script>
</dom-module>

Answer 5

从 Polymer 1.4 开始，可以使用 carbon-route（后来更名为 app-route）：

下面是取自聚合物博客的示例：

<carbon-location route="{{route}}">
</carbon-location>

<carbon-route route="{{route}}" pattern="/tabs/:tabName" data="{{data}}">
</carbon-route>

<paper-tabs selected="{{data.tabName}}" attr-for-selected="key">
  <paper-tab key="foo">Foo</paper-tab>
  <paper-tab key="bar">Bar</paper-tab>
  <paper-tab key="baz">Baz!</paper-tab>
</paper-tabs>

<neon-animated-pages selected="{{data.tabName}}"
                     attr-for-selected="key"
                     entry-animation="slide-from-left-animation"
                     exit-animation="slide-right-animation">
  <neon-animatable key="foo">Foo Page Here</neon-animatable>
  <neon-animatable key="bar">Bar Page Goes Here</neon-animatable>
  <neon-animatable key="baz">Baz Page, the Best One of the Three</neon-animatable>
</neon-animated-pages>

另见类似问题：

Answer 6

好消息！ Polymer 团队发布了一个官方路由器。他们的博客上有一个很好的介绍：

https://www.polymer-project.org/1.0/blog/routing

Github 回购上的 Readme.md 非常有指导意义：

https://github.com/PolymerElements/app-route

基本功能需要两个元素，<app-location> 和 <app-route>

下面是一个简单的例子：

<app-location route="{{route}}"></app-location>
<app-route
    route="[[route]]"
    pattern="/users"
    active="{{usersRouteIsActive}}">
</app-route>

在上面的示例中，usersRouteIsActive 将收到一个布尔值，如果路由匹配 /users，则为 true，否则为 false。简单吧？在此之后，随着应用程序的路由变得更加复杂，app-route 元素将具有更多支持这些需求的功能。

Polymer 1.0 - 路由

Polymer 1.0 - routing

polymer