Web组件的路由器：app-router
jopen
9年前
管理页面状态。延迟加载的内容。数据绑定路径变量和查询参数。使用多个布局。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.