Polymer Routing -


i new polymer testing things out using polymer template:

https://www.polymer-project.org/1.0/start/toolbox/set-up

everything working correctly except when type in direct url, example site.com/page

app-route: https://github.com/polymerelements/app-route load things correctly if click href link /page not load correctly if type in url directly (i 404 error).

what missing? haven't change code demo app (demo app doesn't work me when type in url directly).

you need add .htaccess file index.html is. here full working code routing , iron-pages in it.

.htaccess

rewriteengine on rewritecond %{request_filename} !-f rewritecond %{request_filename} !-d rewriterule .* / 

index.html

<!doctype html> <html lang="en">   <head>     <meta charset="utf-8">     <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">      <title>....</title>     <meta name="description" content="....">      <link rel="manifest" href="/manifest.json">     <link rel="import" href="/src/main-app.html" async>      <style>        .....     </style>    </head>   <body>     <main-app></main-app>     <script>       window.performance && performance.mark && performance.mark('index.html');        polymer = {lazyregister: true, dom: 'shadow'};        (function() {         if ('registerelement' in document             && 'import' in document.createelement('link')             && 'content' in document.createelement('template')) {           // platform good!         } else {           // polyfill platform!           var e = document.createelement('script');           e.src = '/bower_components/webcomponentsjs/webcomponents.min.js';           document.body.appendchild(e);         }       })();     </script>   </body> </html> 

main-app.html

 <!-- start of imports -->     <link rel="import" href="../bower_components/polymer/polymer.html">     <!-- iron ajax -->     <link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">     <!-- route -->     <link rel="import" href="../bower_components/app-route/app-location.html">     <link rel="import" href="../bower_components/app-route/app-route.html">     <!-- iron pages-->     <link rel="import" href="../bower_components/iron-pages/iron-pages.html">            <!-- fragments -->     <link rel="import" href="you-page-to-go-to.html">        <dom-module id="main-app">       <template>       <style>      ....       </style>        <!-- app routing -->       <app-location route="{{route}}"></app-location>       <app-route       route="{{route}}"       pattern="/:page"       data="{{routedata}}"       tail="{{subroute}}">       </app-route>     <iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible">                 <!-- general -->                 <you-page-to-go-to name="you-page-to-go-to"></you-page-to-go-to>               </iron-pages>      </template>      <script>     polymer({       is: 'main-app'       properties: {         page: {           type: string,           reflecttoattribute: true,           observer: '_pagechanged'         },         title:{           type:string,           value:"null"         }       },       /* route */       observers: [         '_routepagechanged(routedata.page)'       ],       _routepagechanged: function(page) {         this.page = page || 'home';         this.draweropened = false;       },       _pagechanged: function(page, oldpage) {         if (page != null) {            this.title = page;            this.importhref(             this.resolveurl('main-' + page + '.html'),             function() {               this._pageloaded(boolean(oldpage));             }, null, true);           }         },         _pageloaded: function(shouldresetlayout) {           if (shouldresetlayout) {             this.async(function() {             }, 1);           }         },        });       </script>     </dom-module> 

Popular posts from this blog

php - How should I create my API for mobile applications (Needs Authentication) -

5 Reasons to Blog Anonymously (and 5 Reasons Not To)

Google AdWords and AdSense - A Dynamic Small Business Marketing Duo