Polymer 2中app-route路由问题：URL变更但数据未在目标页面展示

看起来你遇到的是路由参数变化但组件未响应更新的典型问题——URL变了，但目标页面（my-assessment）没拿到新数据，反而旧页面显示了数据。下面是几个针对性的解决方案，结合你提到的两个文件具体说明：

1. 给my-assessment添加路由参数监听，触发数据重新加载 #

Polymer组件的ready()或attached()钩子只会在组件第一次初始化时执行，路由切换复用组件实例时不会再触发这些方法。所以你需要监听routeData的变化，一旦参数更新就重新获取数据。

修改my-assessment.html：

<dom-module id="my-assessment">
  <template>
    <!-- 页面内容，展示quiz数据 -->
    <div class="quiz-container" hidden$="{{!quizData}}">
      <h2>[[quizData.title]]</h2>
      <!-- 其他quiz内容 -->
    </div>
  </template>
  <script>
    class MyAssessment extends Polymer.Element {
      static get is() { return 'my-assessment'; }
      static get properties() {
        return {
          // 接收路由传递的参数
          routeData: Object,
          // 存储当前quiz的数据
          quizData: Object
        };
      }
      // 定义观察者，监听routeData中的quizId变化
      static get observers() {
        return ['_onQuizIdChanged(routeData.quizId)'];
      }
      // 路由参数变化时触发数据加载
      _onQuizIdChanged(quizId) {
        if (!quizId) return;
        // 调用my-data组件的方法获取对应quiz数据
        const dataService = document.querySelector('my-data');
        dataService.getQuizById(quizId)
          .then(data => {
            // 用Polymer的响应式方式赋值，确保视图更新
            this.set('quizData', data);
          })
          .catch(err => console.error('加载quiz失败:', err));
      }
    }
    customElements.define(MyAssessment.is, MyAssessment);
  </script>
</dom-module>

2. 确保my-data返回最新数据，避免缓存干扰 #

如果my-data.html里有数据缓存逻辑，可能会导致路由切换时返回旧数据。修改它的获取方法，确保每次请求都是针对当前quizId的最新数据：

<dom-module id="my-data">
  <script>
    class MyData extends Polymer.Element {
      static get is() { return 'my-data'; }
      // 根据quizId获取数据，不缓存（或按需缓存）
      async getQuizById(quizId) {
        // 替换成你的实际数据请求地址
        const res = await fetch(`/api/quizzes/${quizId}`);
        if (!res.ok) throw new Error('数据请求失败');
        return res.json();
      }
    }
    customElements.define(MyData.is, MyData);
  </script>
</dom-module>

3. 检查父组件的路由配置是否正确 #

确保父组件（比如my-app.html）的app-route和iron-pages配置正确，能把最新的routeData传递给my-assessment：

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

<!-- iron-pages根据routeData.page切换组件，并传递最新的routeData -->
<iron-pages selected="[[routeData.page]]" attr-for-selected="name">
  <my-home name="home"></my-home>
  <my-assessment 
    name="assessment" 
    route-data="{{routeData}}" 
    subroute="{{subroute}}">
  </my-assessment>
</iron-pages>

注意app-route的pattern要包含你需要的参数（比如:quizId），这样routeData里才会有对应的属性，my-assessment才能监听到变化。

4. 确保数据更新触发视图响应 #

如果你的quizData是复杂对象，更新内部属性时一定要用Polymer的set()方法，比如this.set('quizData.questions', newQuestions)，而不是直接this.quizData.questions = newQuestions——直接赋值不会触发Polymer的响应式更新，导致视图不刷新。

按照这几步调整后，当你点击Quiz Page切换到assessment路由时，my-assessment会监听到路由参数变化，从my-data获取对应的数据并更新视图，就不会再出现数据显示在旧页面的问题了。

内容的提问来源于stack exchange，提问作者user3310115