app-route がどのように機能するかを理解したと思ったとき、この要素に関する私の理解が正しいかどうかを疑う問題に遭遇しました。
私が理解したことから、ブラウザの URL とルートの値を同期させるのは app-location の責任です。そのうちの 1 つが変更された場合、app-location はもう一方も変更されていることを確認します。
また、app-route の route 属性は data 属性と同期しているため、以下のコードの paper-tabs による data 属性の変更により、app-route の route 属性が変更され、app-location が更新されます。ブラウザの URL。
ただし、紙のタブでフォールバック選択属性を使用しなかったため、http://localhostにサーフィンするとパスが「/」に設定され、ホームページが表示されません。
そこで、ready 関数のコードで URL をリダイレクトできると考えました。残念ながら、実際には route.path は変更されますが、URL は変更されません。
何故ですか?関数を介してルートを手動でリダイレクトするにはどうすればよいですか? 言い換えれば、なぜ paper-tabs 要素を介して routeData.subpage を変更するとリダイレクトが発生し、関数から routeData.subpage を変更してもリダイレクトされないのですか?
<dom-module id="polymer-app">
<template>
<style>
:host {
display: block;
}
</style>
<app-location route="{{route}}"></app-location>
<app-route id="ar"
route="{{route}}"
pattern="/:subpage"
data="{{routeData}}"
tail="{{routeTail}}"
active="{{routeActive}}">
</app-route>
<header>
<paper-tabs attr-for-selected="name" selected="{{routeData.subpage}}">
<paper-tab name="home">Home</paper-tab>
<paper-tab name="settings">Settings</paper-tab>
</paper-tabs>
</header>
<section id="main">
<iron-pages attr-for-selected="name" selected="[[routeData.subpage]]">
<home-page name="home"></home-page>
<settings-page name="settings"></settings-pagina>
</iron-pages>
</scection>
</template>
<script>
Polymer({
is: 'polymer-app',
properties: {
route: Object,
routeData: Object,
routeTail: Object,
routeActive: Boolean,
},
ready: function() {
if (this.route.path == "/") {
this.set('routeData.subpage', 'home');
console.log(this.routeData);
console.log(this.route);
}
},
});
</script>
</dom-module>