什么是 can-stache-route-helpers？
can-stache-route-helpers 是一个可以帮助处理浏览器路由相关逻辑的 npm 包。它提供了一些 stache view helper 帮助我们更方便地处理路由导航、视图渲染等逻辑，同时也保证了 URL 和应用程序状态的同步。
安装
可以通过 npm 安装 can-stache-route-helpers：
npm install can-stache-route-helpers --save
初始化
我们需要在引用 can-stache-route-helpers 之前，先引入 can-namespace 和 can-stache-routing。
import namespace from "can-namespace" import "can-stache-routing"
可以通过 namespace 定义一个新的全局变量存储 can-stache-route-helpers：
const testHelpers = namespace.testHelpers
can-stache-route-helpers 提供的 Helper
can-stache-route-helpers 提供了多个 helper，可以帮助我们更方便地处理路由导航和视图渲染。下面介绍一些常用的 helper。
routeUrl
routeUrl 用于从路由名称和路由参数生成 URL 字符串。
const url = testHelpers.routeUrl("exampleRoute", { id: 1 });我们可以使用 can-define/map/map 定义一个地图类型对象存储一个名为 exampleRoute 的路由。
import DefineMap from "can-define/map/map"
const AppViewModel = DefineMap.extend({
exampleRoute: {
value: "/example/{id}",
},
});
routeCurrent
routeCurrent 用于在生成 URL 字符串的时候，自动将当前 URL 参数合并到 URL 字符串中。
const url = testHelpers.routeCurrent({ id: 1 });routeData
routeData 返回当前路由的数据参数。通常在页面渲染时需要用到。
-- -------------------- ---- ------- ------ ------ ---- ------------- ----- -------- - -------- ------------------------- --- ----- --------- - - ---------- ---------------------- -- -----------------------------------------------
routeLink
routeLink 用于生成一个链接，以便用户可以导航到指定页面。routeLink 默认使用路由名称和参数生成 URL 字符串，然后渲染为 a 标签。
import stache from "can-stache";
const template = stache(`
<a {{routeLink page="home"}}>Home</a>
`);
document.body.appendChild(template());
routeComponent
routeComponent 用于根据传递的路由名称和 HTML 元素获取组件视图。这个 helper 很方便，可以把路由对应的组件和 HTML 元素直接绑定在一起，使得组件与路由完美集成。
import stache from "can-stache";
const template = stache(`
<div {{routeComponent page="home"}}></div>
`);
document.body.appendChild(template());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