聚合物路由：内部路由不反映答案

【问题标题】：Polymer routing: inner routes not reflecting聚合物路由：内部路由不反映
【发布时间】：2016-10-21 16:33:17
【问题描述】：

我是 Polymer 的新手，并且一直在阅读并尝试一些东西以获得一些实践经验。

我决定将 Polymer 作为 NodeJS（以 ExpressJS 作为中间件）驱动的应用程序的视图平台，该应用程序将提供视频、音乐和图片等媒体。顺便说一句，我也是 NodeJS 和 Express 的新手，但我的表现足以满足我的 Polymer 观点。

我在反射内部路由时遇到了一些问题。地址栏反映了 URL，但我的视图没有相应改变。我似乎缺少一些基本的东西。

我有以下流程：

应用程序是从我的网络服务器中的“nodepolymer”目录提供的（即它不是根应用程序）示例网址：mywebroot/nodepolymer
主页将包含一些可用媒体的选定图片/文本。视频/音乐和图片的链接会将用户带到各个登陆页面，该页面将提供所选类型/类别的所有可用媒体的列表。示例网址：mywebroot/nodepolymer/view-videos 或 mywebroot/nodepolymer/view-music 等
单击特定媒体文件将打开其自己的单独页面示例 URL：mywebroot/nodepolymer/view-music/view-media（URL 中没有媒体标识符，但“view-media”将在各个类别中通用）
可能会更进一步（我知道嵌套已经很深，但我可能有需要）并且有一个页面/视图用作仅功能视图。示例网址：mywebroot/view-pictures/view-media/create-meme 或 mywebroot/view-videos/view-media/extract-audio 等。

根路由和第一级工作正常，即mywebroot/view-videos/ 或mywebroot/view-music/ 之类的网址。像mywebroot/view-videos/view-media 这样的内部级别确实反映在地址栏中，但视图不会切换。它显示mywebroot/view-videos/ 视图。

下面列出了使基本路由正常工作的相关文件/代码。我正在使用最新版本的 Polymer，路由由 app-route (app-route#^0.9.2) 处理。感谢您的任何指点。

我的 index.html 文件：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>My App</title>
<meta name="description" content="My App description">
<link rel="icon" href="/nodepolymer/images/favicon.ico">
<link rel="manifest" href="/nodepolymer/manifest.json">
<script>
    window.Polymer = {
        dom: 'shadow',
        lazyRegister: true
    };
    (function() {
        'use strict';
        var onload = function() {
            if (!window.HTMLImports) {
                document.dispatchEvent(
                    new CustomEvent('WebComponentsReady', {
                        bubbles: true
                    })
                );
            }
        };
        var webComponentsSupported = (
            'registerElement' in document &&
            'import' in document.createElement('link') &&
            'content' in document.createElement('template')
        );
        if (!webComponentsSupported) {
            var script = document.createElement('script');
            script.async = true;
            script.src = '/nodepolymer/bower_components/webcomponentsjs/webcomponents-lite.min.js';
            script.onload = onload;
            document.head.appendChild(script);
        } else {
            onload();
        }
    })();
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
            navigator.serviceWorker.register('/nodepolymer/service-worker.js');
        });
    }
</script>
<link rel="import" href="/nodepolymer/src/my-app.html">
<style>
    body {
        margin: 0;
        font-family: 'Roboto', 'Noto', sans-serif;
        line-height: 1.5;
        min-height: 100vh;
        background-color: #eeeeee;
    }
</style>
</head>
<body>
<my-app></my-app>
</body>
</html>

“我的应用”元素：

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-tabs/paper-tabs.html">
<link rel="import" href="view-videos.html">
<link rel="import" href="view-music.html">
<link rel="import" href="view-home.html">
<link rel="import" href="my-icons.html">
<dom-module id="my-app">
  <template id="app">
    <app-location route="{{route}}"></app-location>
    <app-route route="{{route}}" pattern="/nodepolymer/:page" data="{{routeData}}" tail="{{tail}}"></app-route>
    <iron-pages selected="[[routeData.page]]" attr-for-selected="data-route" fallback-selection="404">
        <section data-route="">
            Home {{routeData.page}}, [[routeData.page]] <!-- To view values on screen, no values displayed on homepage-->
            </br>
            <a href="/nodepolymer/view-videos">View Videos.</a> | <a href="/nodepolymer/view-music">View Music.</a>
            <view-home data-route="view-home" route=""></view-home>
        </section>
        <view-videos data-route="view-videos" route="{{tail}}"></view-videos>
        <view-music data-route="view-music" route="{{tail}}"></view-music>
        <section data-route="404">
            Oops you hit a 404.
            <a href="/nodepolymer">Head back home.</a>
        </section>
    </iron-pages>
</template>
<script>
    Polymer({
        is: 'my-app',
        properties: {
            page: {
                type: String,
                reflectToAttribute: true,
                observer: '_pageChanged'
            }
        },
        observers: [
            '_routeChanged(route.*)',
            '_viewChanged(routeData.view)'
        ],
        _routeChanged: function(changeRecord) {
            console.log("changeRecord: " + JSON.stringify(changeRecord))
            if (changeRecord.path === 'path') {
                console.log('Path changed!');
            }
        },
        _viewChanged: function(view) {
            console.log("View Changed: " + view)
                // load data for view
        },
        _showPage404: function() {
            this.page = 'view404';
        }
    });
  </script>
</dom-module>

“view-video”元素：

<link rel="import" href="view-media.html"> 
<dom-module id="view-videos">
  <template id="app">
    <app-location route="{{route}}"></app-location>
    <app-route route="{{route}}" pattern="/:vid" data="{{videoData}}" tail="{{subRoute}}"></app-route>
    <app-route route="{{subRoute}}" pattern="/:category" data="{{category}}" tail="{{subRoutes}}"></app-route>
    <app-route route="{{subRoutes}}" pattern="/:cat" data="{{cat}}" tail="{{subRout}}"></app-route>
    <iron-pages selected="[[videoData.vid]]" attr-for-selected="data-route" fallback-selection="404">
        <section data-route="{{videoData.vid}}">
            View Videos {{videoData.vid}}, [[videoData.vid]] ; {{category.category}}, [[category.category]] ; {{cat.cat}}, [[cat.cat]]
            <!--  displays the following text on the view-videos url: nodepolymer, nodepolymer ; view-videos, view-videos ; ,   -->
            <br />
            <a href="/nodepolymer">Home.</a> | <a href="/nodepolymer/view-videos/view-media">View Info for Media.</a>
            <!-- This link will actually be in a repeater and will display a standalone view of the media that is tapped(by passing on an identifier. For testing the routes i have it a simple link. I may later also have another level as "view-video/view-media/my-media-id" for some furhther functions related to the particular media reference). Unable to get this viw intercepted as it defaults to "view-videos" rather than "view-videos/view-media". The URL changes but i see information from "view-video" rather than from "view-media" -->
        </section>
        <view-media data-route="view-media" route="{{subRoute}}"></view-media>
        <section data-route="404">
            404
            <a href="/nodepolymer">Head back home.</a>
        </section>
    </iron-pages>
</template>
<script>
    Polymer({
        is: 'view-videos',
        properties: {
            page: {
                type: String,
                reflectToAttribute: true,
                observer: '_pageChanged'
            }
        },
        observers: [
            '_routeChanged(route.*)',
            '_viewChanged(routeData.view)'
        ],
        _routeChanged: function(changeRecord) {
            console.log("changeRecord: " + JSON.stringify(changeRecord))
            if (changeRecord.path === 'path') {
                console.log('Path changed!');
            }
        },
        _viewChanged: function(view) {
            console.log("View Changed: " + view)
                // load data for view
        },
        _showPage404: function() {
            this.page = 'view404';
        }
    });
 </script>
</dom-module>

“view-media”元素：

<dom-module id="view-media">
<template id="appbb">
    <app-location route="{{rout}}"></app-location>
    <app-route route="{{rout}}" pattern="/:pg" data="{{rouData}}" tail="{{tal}}"></app-route>
    <iron-pages selected="[[rouData.pg]]" attr-for-selected="data-route" fallback-selection="404">
        <section data-route="">
            View Media {{rouData.page}}, [[rouData.pg]] <!-- Displays the following data (but view does not switch): nodepolymer, nodepolymer ; view-videos, view-videos ; view-media, view-media  -->
            <a href="/nodepolymer/view-videos">View Videos.</a><br />
            <a href="/nodepolymer/view-music">View Music.</a>
        </section>
        <section data-route="404">
            Oops you hit a 404.
            <a href="/nodepolymer">Head back home.</a>
        </section>
    </iron-pages>
</template>
<script>
    Polymer({
        is: 'view-media',
        properties: {
        },
        observers: [
        ],
        _routeChanged: function(changeRecord) {
         },

        _viewChanged: function(view) {
         },
        _showPage404: function() {
            this.page = 'view404';
        }
    });
 </script>
</dom-module>

【问题讨论】：

标签： routing polymer polymer-1.0

【解决方案1】：

我确实设法找到了解决方案。我再次浏览了有关路线的文档和视频，发现我需要对我的应用程序进行一些重组。我做到了，我现在能够获得几个嵌套级别。一个直接的问题是我似乎已经定义了<app-location>。我现在只定义一次。但更清晰的结构是主要要求。

一些有用的链接（除了官方文档和视频）对于刚开始使用 Polymer 路线的人们：

This SO question（和答案，其中有视频教程的链接）。
这个in-depth write-up 带有实际用例

【讨论】：