聚合物铁页pagejs不工作答案

【问题标题】：polymer iron-pages pagejs not working聚合物铁页pagejs不工作
【发布时间】：2017-10-25 11:42:47
【问题描述】：

我正在使用 iron-pages 和 page.js 在polymer.js 中实现一个简单的路由应用程序，但这不起作用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
    <link rel="import" href="/bower_components/polymer/polymer.html">
    <link rel="import" href="/bower_components/iron-pages/iron-pages.html">
    
    <link rel="import" href="routes.html">
    <title>Document</title>
</head>
<body>
    <div is="dom-bind" id="app">
        <a data-route="home" href="/">home</a>
        <a data-route="users" href="/users">users</a>
        <a data-route="settings" href="/settings">settings</a>
        
        <iron-pages attr-for-selected="data-route" selected="{{route}}">
            <section data-route="home">Home</section>
            <section data-route="users">Users</section>
            <section data-route="settings">Settings</section>
        </iron-pages>
    </div>
</body>
</html>

<script src="/bower_components/page/page.js"></script>

<script>
    window.addEventListener('WebComponentsReady', function() {
        page('/', function() {
            app.route = 'home'
            console.log(app.route)
            // console.log('home')
        })
        page('/users', function () {
            app.route = 'users'
        })
        page('/settings', function () {
            app.route = 'settings'
        })
        page({
            hashbang: false
        })
    })
</script>

一切似乎都很好，但这不起作用。

【问题讨论】：

究竟是什么不起作用？您的预期结果是什么？
链接正在呈现，但中的内容未呈现。我认为问题在于数据竞价，即 {{router}}
请阅读Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - 总结是这不是解决志愿者的理想方式，并且可能会适得其反。请不要将此添加到您的问题中。

标签： polymer page.js iron-pages

【解决方案1】：

首先，您不应该在 index.html 中使用 Iron-pages。它更容易，并且在您的应用程序的未来还需要创建位于所有结构逻辑（路由、一些弹出元素等）的新元素。 ..)。

Dom-bind 只是临时解决方案。您的代码似乎没问题，应该没有问题。

我假设您已配置您的 .htaccess，因为在使用 page.js 时需要配置它

【讨论】：