2017-02-20 25 views
0

Я новичок в Polymer и использую Polymer версии 1.6.0.Polymer 1.6 - приложение показывает пустую страницу после обновления. Я использую <app-route> router

Использование: пользователь должен увидеть экран входа в систему при запуске приложения. После успешного входа в систему он должен быть направлен на страницу контента.

** Это работает на моем localhost (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», где присутствует код входа.

Пожалуйста, дайте мне знать, где я неправильно

ответ

0

Я решил проблему с помощью хэш URL, как показано ниже:

<app-location route="{{route}}" use-hash-as-path></app-location> 

Я использовал его во всех файлах, где используется.