Web组件的路由器:app-router

jopen 4年前

管理页面状态。延迟加载的内容。数据绑定路径变量和查询参数。使用多个布局。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.

项目主页:http://www.open-open.com/lib/view/home/1416190530305