如何10分钟上手app-routerPolymer单页应用的路由快速入门【免费下载链接】app-routerRouter for Web Components项目地址: https://gitcode.com/gh_mirrors/ap/app-routerapp-router 是一款专为 Web Components 打造的轻量级路由库与 Polymer 框架深度配合帮你轻松搞定单页应用SPA最头疼的页面跳转问题。只需 10 分钟你就能掌握 app-router 的安装、路由配置、参数绑定和页面动画等全部核心能力。为什么需要 app-router单页应用的路由痛点 传统多页应用每次切换页面都要刷新整个文档用户体验割裂。单页应用虽然解决了刷新问题但也带来新的挑战URL 与页面对应关系如何让/order/123这样的地址自动渲染对应页面内容按需加载页面资源能否只在访问时才加载加快首屏速度参数传递路径变量和查询参数如何自动传给页面组件优雅的体验前进后退能不能正常工作页面切换能否有动画过渡app-router 用一个app-router元素就全部解决。它声明式地管理页面状态支持懒加载内容、路径变量与查询参数的自动数据绑定、多布局并通过hashchange和 HTML5pushState两种方式导航还能配合core-animated-pages实现平滑的页面过渡动画。 app-router 不只限于 Polymer它也兼容 X-Tag 和原生 Web Components详见 bower.json 中的关键词定义。第一步安装 app-router1分钟app-router 通过 bower 分发在项目根目录执行一条命令即可完成安装bower install app-router --save如果想把源码拉到本地研究或二次开发可以直接克隆仓库git clone https://gitcode.com/gh_mirrors/ap/app-router第二步定义路由URL 映射到页面核心 5 分钟app-router 的核心思路是声明式配置在 HTML 里放一个app-router里面用app-route描述每个 URL 应该加载什么。先在head中引入路由库再在页面中声明路由表head link relimport href/bower_components/app-router/app-router.html /head body app-router !-- 精确匹配路径 -- app-route path/home import/pages/home-page.html/app-route !-- 通配符匹配 -- app-route path/customer/* import/pages/customer-page.html/app-route !-- 路径变量 -- app-route path/order/:id import/pages/order-page.html/app-route !-- 正则匹配如 /word/number -- app-route path/^\/\w\/\d$/i regex import/pages/regex-page.html/app-route !-- 兜底其他都走 404 页 -- app-route path* import/pages/not-found-page.html/app-route /app-router /body五种路由匹配方式一览表写法说明示例精确路径完全一致才匹配/home通配符*匹配该位置任意内容/customer/*路径变量:name命名占位符可自动绑定/order/:id正则regex按 JS 正则匹配/^\/\w\/\d$/i兜底*匹配所有未命中的路径*完整的路由匹配逻辑可以在 src/app-router.js 中查看testRoute()函数正是负责逐个判断 URL 是否命中某条路由。页面内容的四种加载方式app-route不只支持import一个属性按灵活度从低到高还有懒加载自定义元素import/pages/customer-page.html仅在访问时才加载该 HTML import天然实现按需加载已打包的元素用elementcustomer-page直接使用预先加载好的组件适合用 vulcanize 打包后的场景导入模板加template属性加载template而非完整元素内联模板直接把template写在app-route内部连文件都不用。项目自带的功能测试页 tests/functional-tests/test-main-features.html 把这四种方式全部演示了一遍是最值得研读的示例。第三步实现页面导航的三种方式路由定义好后如何让页面跳转app-router 同时监听popstate和hashchange事件改变 URL 就会自动找到第一条匹配的路由并替换当前视图。方式一hashchange 导航最简单a href#/home首页/a点击后触发hashchange事件路由库会自动处理——#/home会匹配到path/home的路由你无需写任何监听代码。方式二HTML5 pushState 导航URL 更干净借助pushstate-anchor等扩展把普通a升级为 pushState 链接a ispushstate-anchor href/home首页/a这种方式会调用pushState()并派发popstate事件浏览器地址栏保持干净的无哈希地址。方式三JavaScript 命令式跳转在代码中直接调用路由器的go()方法document.querySelector(app-router).go(/home); // 或替换历史记录而非新增 document.querySelector(app-router).go(/home, {replace: true});go()的实现位于 src/app-router.js它会写入历史记录并手动派发popstate事件保证前进后退行为一致。⚠️ 使用go()或重定向时记得给app-router指定modehash或modepushstate否则默认auto模式下会使用哈希路径。附赠路由重定向某条路由可以只负责指路app-router modepushstate app-route path/home import/pages/home-page.html/app-route app-route path* redirect/home/app-route /app-router第四步路径变量与查询参数的自动数据绑定 ✨这是 app-router 最省心的特性——URL 里的参数会自动绑定到页面元素属性上无需手动解析!-- 链接 -- a ispushstate-anchor href/order/123?sortascending订单 123/a !-- 路由 -- app-route path/order/:orderId import/pages/order-page.html/app-route !-- 渲染出的元素自动带上参数 -- order-page orderId123 sortascending/order-page123自动绑到orderId属性ascending自动绑到sort属性。如果你在用 Polymer还可以直接把变量绑进模板app-route path/order/:orderId template p您的订单号是 {{orderId}}/p /template /app-route解析逻辑见 src/app-router.js 中的routeArguments()与typecast()——数字和布尔值还会被自动转换类型typecaststring可保留原始字符串。进阶技巧为页面切换加上动画 给app-router加一个core-animated-pages属性即可让路由切换接入core-animated-pages组件的过渡动画app-router core-animated-pages transitionshero-transition cross-fade !-- app-routes -- /app-router然后在希望参与动画的元素上加hero、cross-fade等属性即可。动画期间旧页面不会立即销毁过渡结束后才清理效果非常顺滑。相关测试用例见 tests/functional-tests/test-core-animated-pages.html。常用配置选项速查表属性位置作用modeapp-routerauto/hash/pushstate/hashbang强制指定导航模式trailingSlashapp-router设为ignore后/home与/home/视为同一路由typecastapp-routerauto默认自动转数字/布尔或string保留原始字符串importapp-route懒加载自定义元素或模板文件elementapp-route使用已加载的元素名或指定元素名与文件名不一致时的名称templateapp-route加载template而非元素可指定模板 IDregexapp-route按正则匹配路径redirectapp-route重定向到另一个路径onUrlChangeapp-routereload/updateModel/noop嵌套路由时只更新最内层更多细节可翻阅 changelog.md 了解各版本新增能力例如 v2.6.0 引入的模板打包与async异步加载、v2.4.0 的**多段通配符等。构建、测试与调试指南源码位于src/目录构建产物写入根目录。调试时建议直接引入未压缩的源码文件而不是根目录的构建版本script src/bower_components/app-router/src/app-router.js/script完整构建流程对应 gulpfile.js执行bower install和npm install安装开发依赖运行gulp一键完成 Lint、测试、构建与压缩功能测试启动任意静态服务器如python -m SimpleHTTPServer打开 tests/functional-tests/ 下的页面手动验证。单元测试基于 Jasmine配置见 tests/karma.conf.js测试用例入口为 tests/spec/routerSpec.js。写在最后10 分钟复盘 回顾一下你刚掌握的内容一条命令bower install app-router --save完成安装一个标签app-router加上若干app-route声明全部路由三种导航哈希链接、pushState 链接、go()命令式跳转自动绑定路径变量和查询参数无需解析直接进组件可选动画一行core-animated-pages属性获得平滑过渡。app-router 用不到 4KB 的压缩代码换来了声明式路由 懒加载 数据绑定 动画的完整 SPA 路由体验。对正在用 Polymer 或 Web Components 开发的朋友来说这是上手成本最低的选择之一。现在就把它加入你的项目让页面切换丝般顺滑吧 延伸阅读完整官方说明见 README.mdCSP 兼容版本入口见 app-router.csp.html。【免费下载链接】app-routerRouter for Web Components项目地址: https://gitcode.com/gh_mirrors/ap/app-router创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 如何10分钟上手app-router：Polymer单页应用的路由快速入门
如何10分钟上手app-routerPolymer单页应用的路由快速入门【免费下载链接】app-routerRouter for Web Components项目地址: https://gitcode.com/gh_mirrors/ap/app-routerapp-router 是一款专为 Web Components 打造的轻量级路由库与 Polymer 框架深度配合帮你轻松搞定单页应用SPA最头疼的页面跳转问题。只需 10 分钟你就能掌握 app-router 的安装、路由配置、参数绑定和页面动画等全部核心能力。为什么需要 app-router单页应用的路由痛点 传统多页应用每次切换页面都要刷新整个文档用户体验割裂。单页应用虽然解决了刷新问题但也带来新的挑战URL 与页面对应关系如何让/order/123这样的地址自动渲染对应页面内容按需加载页面资源能否只在访问时才加载加快首屏速度参数传递路径变量和查询参数如何自动传给页面组件优雅的体验前进后退能不能正常工作页面切换能否有动画过渡app-router 用一个app-router元素就全部解决。它声明式地管理页面状态支持懒加载内容、路径变量与查询参数的自动数据绑定、多布局并通过hashchange和 HTML5pushState两种方式导航还能配合core-animated-pages实现平滑的页面过渡动画。 app-router 不只限于 Polymer它也兼容 X-Tag 和原生 Web Components详见 bower.json 中的关键词定义。第一步安装 app-router1分钟app-router 通过 bower 分发在项目根目录执行一条命令即可完成安装bower install app-router --save如果想把源码拉到本地研究或二次开发可以直接克隆仓库git clone https://gitcode.com/gh_mirrors/ap/app-router第二步定义路由URL 映射到页面核心 5 分钟app-router 的核心思路是声明式配置在 HTML 里放一个app-router里面用app-route描述每个 URL 应该加载什么。先在head中引入路由库再在页面中声明路由表head link relimport href/bower_components/app-router/app-router.html /head body app-router !-- 精确匹配路径 -- app-route path/home import/pages/home-page.html/app-route !-- 通配符匹配 -- app-route path/customer/* import/pages/customer-page.html/app-route !-- 路径变量 -- app-route path/order/:id import/pages/order-page.html/app-route !-- 正则匹配如 /word/number -- app-route path/^\/\w\/\d$/i regex import/pages/regex-page.html/app-route !-- 兜底其他都走 404 页 -- app-route path* import/pages/not-found-page.html/app-route /app-router /body五种路由匹配方式一览表写法说明示例精确路径完全一致才匹配/home通配符*匹配该位置任意内容/customer/*路径变量:name命名占位符可自动绑定/order/:id正则regex按 JS 正则匹配/^\/\w\/\d$/i兜底*匹配所有未命中的路径*完整的路由匹配逻辑可以在 src/app-router.js 中查看testRoute()函数正是负责逐个判断 URL 是否命中某条路由。页面内容的四种加载方式app-route不只支持import一个属性按灵活度从低到高还有懒加载自定义元素import/pages/customer-page.html仅在访问时才加载该 HTML import天然实现按需加载已打包的元素用elementcustomer-page直接使用预先加载好的组件适合用 vulcanize 打包后的场景导入模板加template属性加载template而非完整元素内联模板直接把template写在app-route内部连文件都不用。项目自带的功能测试页 tests/functional-tests/test-main-features.html 把这四种方式全部演示了一遍是最值得研读的示例。第三步实现页面导航的三种方式路由定义好后如何让页面跳转app-router 同时监听popstate和hashchange事件改变 URL 就会自动找到第一条匹配的路由并替换当前视图。方式一hashchange 导航最简单a href#/home首页/a点击后触发hashchange事件路由库会自动处理——#/home会匹配到path/home的路由你无需写任何监听代码。方式二HTML5 pushState 导航URL 更干净借助pushstate-anchor等扩展把普通a升级为 pushState 链接a ispushstate-anchor href/home首页/a这种方式会调用pushState()并派发popstate事件浏览器地址栏保持干净的无哈希地址。方式三JavaScript 命令式跳转在代码中直接调用路由器的go()方法document.querySelector(app-router).go(/home); // 或替换历史记录而非新增 document.querySelector(app-router).go(/home, {replace: true});go()的实现位于 src/app-router.js它会写入历史记录并手动派发popstate事件保证前进后退行为一致。⚠️ 使用go()或重定向时记得给app-router指定modehash或modepushstate否则默认auto模式下会使用哈希路径。附赠路由重定向某条路由可以只负责指路app-router modepushstate app-route path/home import/pages/home-page.html/app-route app-route path* redirect/home/app-route /app-router第四步路径变量与查询参数的自动数据绑定 ✨这是 app-router 最省心的特性——URL 里的参数会自动绑定到页面元素属性上无需手动解析!-- 链接 -- a ispushstate-anchor href/order/123?sortascending订单 123/a !-- 路由 -- app-route path/order/:orderId import/pages/order-page.html/app-route !-- 渲染出的元素自动带上参数 -- order-page orderId123 sortascending/order-page123自动绑到orderId属性ascending自动绑到sort属性。如果你在用 Polymer还可以直接把变量绑进模板app-route path/order/:orderId template p您的订单号是 {{orderId}}/p /template /app-route解析逻辑见 src/app-router.js 中的routeArguments()与typecast()——数字和布尔值还会被自动转换类型typecaststring可保留原始字符串。进阶技巧为页面切换加上动画 给app-router加一个core-animated-pages属性即可让路由切换接入core-animated-pages组件的过渡动画app-router core-animated-pages transitionshero-transition cross-fade !-- app-routes -- /app-router然后在希望参与动画的元素上加hero、cross-fade等属性即可。动画期间旧页面不会立即销毁过渡结束后才清理效果非常顺滑。相关测试用例见 tests/functional-tests/test-core-animated-pages.html。常用配置选项速查表属性位置作用modeapp-routerauto/hash/pushstate/hashbang强制指定导航模式trailingSlashapp-router设为ignore后/home与/home/视为同一路由typecastapp-routerauto默认自动转数字/布尔或string保留原始字符串importapp-route懒加载自定义元素或模板文件elementapp-route使用已加载的元素名或指定元素名与文件名不一致时的名称templateapp-route加载template而非元素可指定模板 IDregexapp-route按正则匹配路径redirectapp-route重定向到另一个路径onUrlChangeapp-routereload/updateModel/noop嵌套路由时只更新最内层更多细节可翻阅 changelog.md 了解各版本新增能力例如 v2.6.0 引入的模板打包与async异步加载、v2.4.0 的**多段通配符等。构建、测试与调试指南源码位于src/目录构建产物写入根目录。调试时建议直接引入未压缩的源码文件而不是根目录的构建版本script src/bower_components/app-router/src/app-router.js/script完整构建流程对应 gulpfile.js执行bower install和npm install安装开发依赖运行gulp一键完成 Lint、测试、构建与压缩功能测试启动任意静态服务器如python -m SimpleHTTPServer打开 tests/functional-tests/ 下的页面手动验证。单元测试基于 Jasmine配置见 tests/karma.conf.js测试用例入口为 tests/spec/routerSpec.js。写在最后10 分钟复盘 回顾一下你刚掌握的内容一条命令bower install app-router --save完成安装一个标签app-router加上若干app-route声明全部路由三种导航哈希链接、pushState 链接、go()命令式跳转自动绑定路径变量和查询参数无需解析直接进组件可选动画一行core-animated-pages属性获得平滑过渡。app-router 用不到 4KB 的压缩代码换来了声明式路由 懒加载 数据绑定 动画的完整 SPA 路由体验。对正在用 Polymer 或 Web Components 开发的朋友来说这是上手成本最低的选择之一。现在就把它加入你的项目让页面切换丝般顺滑吧 延伸阅读完整官方说明见 README.mdCSP 兼容版本入口见 app-router.csp.html。【免费下载链接】app-routerRouter for Web Components项目地址: https://gitcode.com/gh_mirrors/ap/app-router创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考