什么是 can-stache-route-helpers？
can-stache-route-helpers 是一个可以帮助处理浏览器路由相关逻辑的 npm 包。它提供了一些 stache view helper 帮助我们更方便地处理路由导航、视图渲染等逻辑，同时也保证了 URL 和应用程序状态的同步。
安装
可以通过 npm 安装 can-stache-route-helpers：
--- ------- ------------------------ ------
初始化
我们需要在引用 can-stache-route-helpers 之前，先引入 can-namespace 和 can-stache-routing。
------ --------- ---- --------------- ------ --------------------
可以通过 namespace 定义一个新的全局变量存储 can-stache-route-helpers：
----- ----------- - ---------------------
can-stache-route-helpers 提供的 Helper
can-stache-route-helpers 提供了多个 helper，可以帮助我们更方便地处理路由导航和视图渲染。下面介绍一些常用的 helper。
routeUrl
routeUrl 用于从路由名称和路由参数生成 URL 字符串。
----- --- - ------------------------------------ - --- - ---
我们可以使用 can-define/map/map 定义一个地图类型对象存储一个名为 exampleRoute 的路由。
------ --------- ---- --------------------
----- ------------ - ------------------
------------- -
------ ----------------
--
---
routeCurrent
routeCurrent 用于在生成 URL 字符串的时候，自动将当前 URL 参数合并到 URL 字符串中。
----- --- - -------------------------- --- - ---
routeData
routeData 返回当前路由的数据参数。通常在页面渲染时需要用到。
------ ------ ---- ------------- ----- -------- - -------- ------------------------- --- ----- --------- - - ---------- ---------------------- -- -----------------------------------------------
routeLink
routeLink 用于生成一个链接，以便用户可以导航到指定页面。routeLink 默认使用路由名称和参数生成 URL 字符串，然后渲染为 a 标签。
------ ------ ---- ------------- ----- -------- - -------- -- ----------- ---------------------- --- --------------------------------------
routeComponent
routeComponent 用于根据传递的路由名称和 HTML 元素获取组件视图。这个 helper 很方便，可以把路由对应的组件和 HTML 元素直接绑定在一起，使得组件与路由完美集成。
------ ------ ---- ------------- ----- -------- - -------- ---- ---------------- -------------------- --- --------------------------------------
routeData
routeData 用于获取当前路由的数据参数，这和我们上面介绍的 routeData 是一样的。
示例代码
首先我们需要引入 can-stache-route-helpers，然后通过 can-namespace 定义一个全局变量 testHelpers 存储 can-stache-route-helpers：
------ --------- ---- --------------- ------ -------------------- ------ --------------------- ---- -------------------------- ----- ----------- - --------------------- - --- -------------------- - ------------------------------- ------------------------ - ----------------------------------- --------------------- - -------------------------------- --------------------- - -------------------------------- -------------------------- - -------------------------------------
然后我们可以使用上面介绍的 helper 进行路由相关操作。
------ --------- ---- --------------------
------ ------ ---- -------------
----- ------------ - ------------------
------------- -
------ ----------------
--
---------- -
------ --------
--
---
----- -------- - --------
-----
-- ----------- ----------------------
-- ----------- ------------------- --------------------
---- ---------------- --------------------
---- ---------------- ----------------------------
------
---
-------------------------------------- -----------------
通过上面的示例我们可以看到，can-stache-route-helpers 提供的 helper 很方便，可以帮我们更方便地处理路由导航和视图渲染，同时也能保证 URL 和应用程序状态的同步。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/75645