Polymer app-route не работает, так как каждый раз он обновляет sh страницу вместо навигации - PullRequest
0 голосов
/ 27 февраля 2020

Я реализовал app-маршрутизацию в полимере, но каждый раз, когда я нажимаю на ссылку, она обновляет sh страницу, из-за чего она всегда go к странице по умолчанию.

Это мой первый раз, когда я реализуя маршрутизацию, я не могу найти причину для ссылки на страницу sh. Может кто-нибудь подсказать, если я что-то упустил.


    <link rel="import" href="../iron-selector/iron-selector.html">
    <link rel="import" href="../iron-pages/iron-pages.html">
    <link rel="import" href="../app-layout/app-drawer-layout/app-drawer-layout.html">
    <link rel="import" href="../app-layout/app-drawer/app-drawer.html">
    <link rel="import" href="../app-route/app-location.html">
    <link rel="import" href="../app-route/app-route.html">
    <template>
        <app-location
            route="{{route}}"
            url-space-regex="^[[rootPath]]">
        </app-location>
        <app-route id="route"
                   route="{{route}}"
                   pattern="[[rootPath]]:page"
                   data="{{routeData}}"
                   tail="{{subroute}}">
        </app-route>
        <app-drawer-layout fullbleed narrow="{{narrow}}">
          <!-- Drawer content -->
          <app-drawer id="drawer" slot="drawer" swipe-open="[[narrow]]">
              <app-toolbar>[[route]]</app-toolbar>
              <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
               <a name="accopDelorean" href="[[rootPath]]accopDelorean">Delorean</a>
               <a name="accopApp" href="[[rootPath]]accopApp">View One</a>
              </iron-selector>
          </app-drawer>
          <app-header-layout has-scrolling-region>
           <iron-pages
                selected="[[page]]"
                attr-for-selected="name"
                fallback-selection="accopDelorean"
                role="main">
              <accop-delorean  name="accopDelorean"></accop-delorean>
              <accop-app  name="accopApp"></accop-app>
            </iron-pages>
          </app-header-layout>
        </app-drawer-layout>
          </template>

JS Файл: -

static get properties() {
    return {
      isAuthenticated: {type: Boolean, value: false},
      gapiInitialized: {type: Boolean, value: false},
      page: {
        type: String,
        reflectToAttribute: true,
        observer: '_pageChanged',
      },
      routeData: Object,
      subroute: Object,
      rootPath: String,
    };
  }

  static get observers() {
    return [
      '_routePageChanged(routeData.page)',
    ];
  }

  _routePageChanged(page) {
        // If no page was found in the route data, page will be an empty string.
        // Default to 'view1' in that case.
        this.page = page || 'accop-delorean';

        // Close a non-persistent drawer when the page & route are changed.
        setTimeout(() => {
          var drawer = this.shadowRoot.getElementById('drawer');
          if (!drawer.persistent) {
            drawer.close();
          }
        });
      }

      _pageChanged(page) {
        // Load page import on demand. Show 404 page if fails
        const resolvedPageUrl = this.resolveUrl(page + '.html');
        Polymer.importHref(
            resolvedPageUrl,
            null,
            () => {console.log('page not loaded is' + resolvedPageUrl);},
            true);
  }

ImportHref выдавал ошибку, поэтому я добавил (<link rel="import" href="../polymer/lib/utils/import-href.html">)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...