Polymer 1.6 - 应用程序在刷新后显示空白页面。我正在使用 <app-route> 路由器
Polymer 1.6 - App shows blank page after refresh. I am using <app-route> router
我是 Polymer 新手,正在使用 Polymer 1.6.0 版。
用例:用户应该在启动应用程序时看到登录屏幕。成功登录后,他应该被引导到一个内容页面。
** 这在我的本地主机 (127.0.0.1/index.html) 上工作,但是当我尝试在路径为 "myapplication.io/myapp/admin/index.html" 的外部服务器上 运行 它时,它显示空白屏幕。
这是我使用的代码:
index.html:
<body>
<myadmin-app></myadmin-app>
</body>
myadmin-app.html:
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"
active="{{active}}"></app-route>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title style="text-align: center;">MY ADMIN</div>
</app-toolbar>
</app-header>
<iron-pages
selected="[[page]]"
attr-for-selected="name"
selected-attribute="active"
fallback-selection="not-found"
role="main">
<config-option name="config-option"></config-option>
<register-login name="register-login"></register-login>
<other-option name="other-option"></other-option>
<not-found name="not-found"></not-found>
</iron-pages>
<script>
(function() {
Polymer({
is: 'myadmin-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
},
storedUser: Object
},
ready: function(){
},
observers: [
'_routePageChanged(routeData.page)'
],
_routePageChanged: function(page) {
console.log("routechanged page = " + page);
this.page = page || 'register-login';
},
_pageChanged: function(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl(page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
},
_showPage404: function() {
this.page = 'not-found';
}
});
}());
</script>
当我在服务器上 运行 时,上面代码中的 resolvedPageURL 以 "myapp" 而不是“/”的形式出现。因此,该应用程序正在尝试查找 "myapp.html" 不存在的页面。它应该得到“/”,以便它将被重定向到 "register-login.html" 存在登录代码的页面。
请让我知道哪里错了
我使用哈希 URL 解决了这个问题,如图所示:
<app-location route="{{route}}" use-hash-as-path></app-location>
我在所有使用的文件中都使用了它。
我是 Polymer 新手,正在使用 Polymer 1.6.0 版。
用例:用户应该在启动应用程序时看到登录屏幕。成功登录后,他应该被引导到一个内容页面。
** 这在我的本地主机 (127.0.0.1/index.html) 上工作,但是当我尝试在路径为 "myapplication.io/myapp/admin/index.html" 的外部服务器上 运行 它时,它显示空白屏幕。
这是我使用的代码:
index.html:
<body>
<myadmin-app></myadmin-app>
</body>
myadmin-app.html:
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"
active="{{active}}"></app-route>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title style="text-align: center;">MY ADMIN</div>
</app-toolbar>
</app-header>
<iron-pages
selected="[[page]]"
attr-for-selected="name"
selected-attribute="active"
fallback-selection="not-found"
role="main">
<config-option name="config-option"></config-option>
<register-login name="register-login"></register-login>
<other-option name="other-option"></other-option>
<not-found name="not-found"></not-found>
</iron-pages>
<script>
(function() {
Polymer({
is: 'myadmin-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
},
storedUser: Object
},
ready: function(){
},
observers: [
'_routePageChanged(routeData.page)'
],
_routePageChanged: function(page) {
console.log("routechanged page = " + page);
this.page = page || 'register-login';
},
_pageChanged: function(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl(page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
},
_showPage404: function() {
this.page = 'not-found';
}
});
}());
</script>
当我在服务器上 运行 时,上面代码中的 resolvedPageURL 以 "myapp" 而不是“/”的形式出现。因此,该应用程序正在尝试查找 "myapp.html" 不存在的页面。它应该得到“/”,以便它将被重定向到 "register-login.html" 存在登录代码的页面。
请让我知道哪里错了
我使用哈希 URL 解决了这个问题,如图所示:
<app-location route="{{route}}" use-hash-as-path></app-location>
我在所有使用的文件中都使用了它。