npm 包 hyperapp-router 使用教程-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展，Web 应用也越来越复杂，单页面应用已经是前端开发的主流。在开发单页面应用时，需要解决前进、后退、刷新、页面跳转等问题。而 hyperapp-router 正是一款专门用于解决单页面应用路由问题的 npm 包，本文将介绍 hyperapp-router 的使用教程。

hyperapp-router 简介

hyperapp-router 是一个基于 Hyperapp 3.x 的轻量级路由库，支持常用的路由控制方式，提供了路由映射、URL 解析、URL 定位等功能。它可以让你在 Single Page Application 中轻松地管理链接，执行页面跳转等操作。

安装 hyperapp-router

使用 npm 会更加方便，可以使用以下命令进行安装。

npm install hyperapp-router

hyperapp-router 的应用示例

-- -------------------- ---- -------
------ - -- --- - ---- ----------
------ - ------ --------- ---- - ---- -----------------

----- ----- - -
  --------- ---------------
  ------ -
-

----- ------- - -
  --------- -----------------
  --- -- -- ----- -- -- ------ ----------- - - --
-

----- ---- - ------- -------- --
  -------- ----- -
    ------- ----- ------ --------

    -------- ----- -
      ------- - --- --- -- --------
      ------- - --- -------- -- --------
    ---

    -------- - ----- --- -- -- -- -------- ----- -------------
    -------- - ----- -------- -- -- -- -------- ----- ------ ------
  --

----- ---- - ---------- -------- ----- --------------

----- ----------- - ---------------------------------

上面的代码中，我们使用了 Hyperapp 和 hyperapp-router 的一些基本功能。通过 Link 组件创建链接，实现页面之间的切换；通过 Route 组件实现路由的匹配和对应的组件渲染；通过 location 模块获取路由信息，并将其映射到应用的状态中。

详细介绍

将 hyperapp-router 添加到应用中

首先，在应用中导入 Route、location 和 Link 组件，它们是 hyperapp-router 提供的核心组件，方便我们完成页面跳转和路由管理。

import { Route, location, Link } from "hyperapp-router"

接着，通过 location.state 将路由信息添加到应用的状态中，使它成为状态树的一部分。

const state = {
  location: location.state,
  count: 0
}

此时，我们已经将路由信息动态地添加到应用状态中，并实现了组件状态的响应式更新。接下来，我们需要通过 location.actions 将路由模块的动作添加到应用中。

const actions = {
  location: location.actions,
  up: () => state => ({ count: state.count + 1 })
}

这里还添加了一个 up 的动作，它将在后面用到。

创建链接

使用 Link 组件可以创建跳转链接，非常类似于 HTML 中的 <a> 标签。代码如下：

h(Link, { to: "/" }, "Home")

在 Link 组件中，我们可以指定跳转链接的路径——通过 to 属性实现。这里的路径必须和 Route 组件的 path 属性匹配才能正确跳转。

路由匹配

使用 Route 组件对地址进行路由匹配。如果与 path 属性匹配，则会调用使用该组件的函数作为回调进行渲染。

h(Route, { path: "/" }, () => h("div", null, "Welcome!"))

上面代码的含义是，如果当前 URL 以 '/' 开始，则在页面上渲染出 'Welcome!' 文字。

为了让 Route 能够动态地匹配路由，可以使用诸如 :id 这样的占位符。当路由匹配到 /user/:id 时，用户访问 /user/123，将会传入 123 作为参数。

h(Route, { path: "/user/:id" }, ({ id }) => h("div", null, `Hello, ${id}!`))

路由映射

路由映射是 hyperapp-router 的另一个核心特性，我们可以使用 links 属性实现路由映射。将任何字符串转换为用于 navigation 的 web URL。例如，可以使用 links 的 userProfile 字段，将值 123 映射到 URL /user/123。

location.href = location.link("userProfile", { id: 123 })

URL 解析

hyperapp-router 还可以将 URL 解析为路由信息。在应用中，可以使用 location.href 获取当前 URL，并使用 location.pathname 获取解析后的 URL 路径。需要注意的是，location.pathname 不包括 hostname 和搜索参数。

const currentPath = location.pathname

URL 定位

最后，我们来谈谈 hyperapp-router 与 location 模块的集成。

在应用中，我们可以使用 location.subscribe() 监听路由变化。每次路由变化时，都会调用我们提供的函数，该函数可以实现路由变化时其他相关动作的执行，如：重新渲染组件、发送统计数据等。

const unsubscribe = location.subscribe(main.location)

此外，我们还可以使用 location.push() 方法实现跳转到新的路由。

location.push("/new/path")

结语

本文简单地介绍了 hyperapp-router 的使用，包括创建链接、路由匹配、路由映射、URL 解析和 URL 定位等方面的内容。作为一款轻量级的、灵活的路由库，hyperapp-router 基于 Hyperapp 3.x，给开发者带来了更加舒适的路由管理体验。对于需要开发多页面应用或者单页应用的开发者来说，这款路由库是一个值得一试的好选择。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005600e81e8991b448dde4d