如何从子元素更改app路由位置

Question

我创建了基于app-route的项目。某些事件，我需要将路由更改为不同的根。

index.html

<my-app></my-app>

my-app.html

<!-- this app-route manages the top-level routes -->
<app-route
    route="{{route}}"
    pattern="/:view"
    data="{{routeData}}"
    tail="{{subroute}}"></app-route>

<!-- iron-pages selects the view based on the active route -->
<iron-pages selected="[[routeData.view]]" attr-for-selected="name">
  <landing-app name="home" route="{{subroute}}"></landing-app>
  <dashboard-app name="dashboard" route="{{subroute}}"></dashboard-app>
</iron-pages>

landing-app.html

当处理程序调用时，我需要更改到仪表板的路由。如何做到这一点？

<dom-module id="landing-app">
  <template>
    <button on-click="_handlerCall">Change to Dashboard</button>
  </template>
  <script>
    class LandingApp extends Polymer.Element {

      static get is() {return 'landing-app'}

      _handlerCall() {
        this.set('route.path', '/dashboard') // but no luck :(
      }
    }
    customElements.define(LandingApp.is, LandingApp);
  </script>
</dom-module>

Answer 1

在landing-app.html中的<template>之后添加：<app-location route="{{route}}"></app-location>

<dom-module id="landing-app">
  <template>
    <app-location route="{{route}}"></app-location>
    <button on-click="_handlerCall"> Change to Dashboard</button>
  </template>
  <script>
    class LandingApp extends Polymer.Element {

      static get is() {return 'landing-app'}

      _handlerCall() {
        this.set('route.path', '/dashboard') // :)
      }
    }
    customElements.define(LandingApp.is, LandingApp);
  </script>
</dom-module>

app-location文档：https://www.webcomponents.org/element/PolymerElements/app-route/elements/app-location