jopen 5年前

管理页面状态。延迟加载的内容。数据绑定路径变量和查询参数。使用多个布局。hashchange的导航和HTML5 pushState。使用core-animated-pages实现网页动画切换。


Define how URLs map to pages.

<!doctype html>  <html>    <head>      <title>App Router</title>      <link rel="import" href="/bower_components/app-router/app-router.html">    </head>    <body>      <app-router>        <!-- matches an exact path -->        <app-route path="/home" import="/pages/home-page.html"></app-route>          <!-- matches using a wildcard -->        <app-route path="/customer/*" import="/pages/customer-page.html"></app-route>          <!-- matches using a path variable -->        <app-route path="/order/:id" import="/pages/order-page.html"></app-route>          <!-- matches a pattern like '/word/number' -->        <app-route path="/^\/\w+\/\d+$/i" regex import="/pages/regex-page.html"></app-route>          <!-- matches everything else -->        <app-route path="*" import="/pages/not-found-page.html"></app-route>      </app-router>    </body>  </html>


Click links or call router.go().

<!-- hashchange -->  <a href="/#/home">Home</a>    <!-- pushState() -->  <a is="pushstate-anchor" href="/home">Home</a>    <!-- router.go(path, options) -->  <script>    document.querySelector('app-router').go('/home');  </script>

The router listens to popstate and hashchange events. Changing the URL will find the first app-route that matches, load the element or template, and replace the current view.