Web組件的路由器：app-router
管理頁面狀態。延遲加載的內容。數據綁定路徑變量和查詢參數。使用多個布局。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.
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！