Javascript 聚合物，如何使用应用程序位置？

我正在尝试使用应用程序位置，以便动态加载带有其他文章链接的文章，并能够使用浏览器导航在它们之间来回切换，就像在普通网站上一样。我对应用程序位置的理解是，它获取从链接发送到浏览器的URL并更新其路由值，允许您在客户端执行路由。这是我的第一篇测试“文章”，内容很好：

<h1>Title header</h1>

<p>Here's a bunch of words and this one's <b>special</b></p>

<a id="content-link" href="/articles/test2.txt" on-tap="handleTap">link to another article</a>

标题标题
这里有一堆词，这一个很特别

test2.txt只有一个带有一些文本的p标记

这就是它在初始加载时的样子。主要部分底部的链接就是我所说的链接。我的意图是，如果我单击该链接，它将更改url，然后应用程序位置将获取该url并更改其路由属性，然后我的观察者可以清除旧的“文章”，加载新的，并将其插入内容区域。因此，由于加载了“新页面”，我应该能够点击浏览器后退按钮返回到上面的页面

但是，当我单击链接时，它只是将该文件作为原始文本文件加载，并显示：

加载了一个新页面WOOOOOO

，包括p标记。显然，我误解了一些东西，这很可能是因为我对聚合物还很陌生，这是一个学习项目。有没有人能找到我做错了什么，或者给我一些建议，告诉我应该做些什么来让我的想法发挥作用

以下是我的完整元素代码：

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../../bower_components/app-route/app-*">

<dom-module id="AR_Website-app">
  <template>
    <style>
      /*header*/
      header {
        display: block;
        padding: 20px 0;
        padding-left: 30px;
        background-color: rgb(220, 60, 50);
      }

      p {
        margin: 0;
        font-family: Verdana, Geneva, sans-serif;
        font-size: 30px;
        animation: title-fadein 1s;
        animation-fill-mode: forwards;
      }

      @keyframes title-fadein {
        from {
          text-shadow: none;
          opacity:0;
        }

        to{
          text-shadow: 0 0 2px black;
          opacity:1;
        }
      }

      /*content*/
      table {
        border-collapse: collapse;
        width: 100%;
        min-height: calc(100vw - 110px);
      }

      table td {
        vertical-align: top;
        padding: 0;
      }

      table td:nth-child(1) {
        background-color: blue;
      }

      table td:nth-child(2) {
        background-color: green;
        padding: 10px;
      }

      table td:nth-child(3) {
        background-color: red;
      }
    </style>

    <app-location route="{{route}}"></app-location>
    <app-route 
      route="{{route}}" 
      pattern="/:articles" 
      data="{{routeData}}" 
      tail="{{subroute}}">
    </app-route>

    <iron-ajax url="{{route}}" handle-as="text" on-response="handleRequest"></iron-ajax>

    <header><p>The Title</p></header>
    <table>
      <tr>
        <td width="10%"><div id="left-banner">

        </div></td>
        <td width="80%">
          <div id="content">

          </div>
        </td>
        <td width="10%"><div id="right-banner">

        </div></td>
      </tr>
    </table>
  </template>

  <script>

    Polymer({

      is: 'AR_Website-app',


      observers: [
        '_routeChanged(route)'
      ],

      attached: function (){
        this.route = "/articles/test.txt"
        //console.log("Page loaded, sending request for route "+this.route)
        this.$$('iron-ajax').generateRequest();
      },

      _routeChanged: function(route) {
        console.log("new route "+route+", sending request")
        this.$$('iron-ajax').generateRequest();
      },

      handleRequest: function(event) {
        //Remove existing html snippet
        console.log("handling request")
        while (this.$$('#content *') != null){
          this.$$('#content').removeChild(this.$$('#content *'))
        }
        //Create new html code from received text
        console.log(event.detail.response)
        var div = document.createElement('div')
        div.innerHTML = event.detail.response
        for (x = 0; x < div.childNodes.length; x++){
          var content = div.childNodes[x]
          this.$$('#content').appendChild(content)
        }
        //Add event handlers for links
        //this.listen(this.$$('#content-link'), 'tap', 'handleTap')
      },

      handleTap: function(event) {
        //Cancel page load from link
        //event.preventDefault();
        //Request new html snippet
        console.log("Loading "+this.$$('#content-link').href)
        //this.set('route', this.$$('#content-link').href)
        this.route = this.$$('#content-link').href
        //this.$$('iron-ajax').generateRequest();
      }
    });
  </script>
</dom-module>

/*标题*/
标题{
显示：块；
填充：20px0；
左侧填充：30px；
背景色：rgb（220,60,50）；
}
p{
保证金：0；
字体系列：Verdana，日内瓦，无衬线；
字体大小：30px；
动画：标题Fadein1s；
动画填充模式：正向；
}
@关键帧标题fadein{
从{
文本阴影：无；
不透明度：0；
}
到{
文本阴影：0 0 2px黑色；
不透明度：1；
}
}
/*内容*/
桌子{
边界塌陷：塌陷；
宽度：100%；
最小高度：计算（100vw-110px）；
}
表td{
垂直对齐：顶部；
填充：0；
}
表td:N个孩子（1）{
背景颜色：蓝色；
}
表td：第n个孩子（2）{
背景颜色：绿色；
填充：10px；
}
表td：第n个孩子（3）{
背景色：红色；
}
标题

聚合物({
是：“AR_网站应用程序”，
观察员：[
"更改路线(路线)"
],
附：函数（）{
this.route=“/articles/test.txt”
//console.log（“页面加载，发送路由请求”+此.route）
这个.$$（'iron-ajax'）.generateRequest（）；
},
_路由更改：功能（路由）{
console.log（“新路由”+路由+”，发送请求）
这个.$$（'iron-ajax'）.generateRequest（）；
},
HandlerRequest:函数（事件）{
//删除现有的html代码段
控制台日志（“处理请求”）
while（this.$$（“#content*”）！=null）{
this.$$（'#content'）.removeChild（this.$$（'#content*'））
}
//从收到的文本创建新的html代码
console.log（event.detail.response）
var div=document.createElement（'div'）
div.innerHTML=event.detail.response
对于（x=0；x

基于您的代码

应用程序目录

app
- bower_components
- articles
-- a.txt
-- b.txt
- index.html
- my-app.html

index.html

<!doctype html>
<html>
  <head>

    <link rel='import' href='my-app.html'>

  </head>
  <body>

    <my-app></my-app>

  </body>
</html>

我想应该是这样

this.set('route.path', 'some path');

---

我希望这会有所帮助。

啊，好的，我想我了解大部分变化。唯一的问题是，在routeChanged中，您将条件设置为

this.$$（'app-route'）。处于活动状态。什么是
.active
？如果模式匹配，则为真。看到并小心。
this.route = 'some path';

this.set('route.path', 'some path');