前言
前端路由是单页应用最重要的一部分之一，它以 URL 为基础，通过 JavaScript 操作 DOM 实现页面切换、数据请求等功能。相信很多同学在学习中已经学习过 React、Vue 或 Angular 等现代框架中内嵌的路由，但有时候我们需要一个轻量级的路由库来快速构建项目。这时候就可以使用 wee-router，一个小而美、配置简单易用的 JavaScript 路由库。
安装
wee-router 可以通过 npm 安装，安装命令如下：
--- ------- ---------- ------
使用
在入口文件中引入 wee-router，然后你就可以愉快地使用它了！下面我们通过一个简单的示例来展示使用过程。
首先，先创建一个 HTML 文件，包含两个链接和一个用于显示内容的容器：
--------- -----
------
------
----- ----------------
----------------- ------------
-------
------
-----
-- ----------------
-- -----------------------
------
---- -------------------
------- -------------------------
-------
-------接着，我们编写 JavaScript 代码，使用 wee-router 实现路由功能：
------ --------- ---- -------------
-- -----
----- ------ - -
-
----- ----
-------- -- -- -
---------------------------------------------- - -------
-
--
-
----- ---------
-------- -- -- -
---------------------------------------------- - ---------
-
-
--
-- -----
----- ------ - --- ------------------
-- -- ---- --
------------------------------------- -- -- -
-----------------
---
-- --------
-----------------路由表定义了路由规则和对应事件处理函数。我们在这里定义了两个路由，一个是首页路径 /，一个是关于我们路径 /about，并在这两个路由的事件处理函数中分别向容器中插入内容，以此来实现路由切换和内容更新。当 URL 中的 hash 发生变化时，我们手动调用 router.resolve() 函数进行路由切换。
参数说明
在创建 WeeRouter 实例时，可以传入一些配置参数。
routes
必选，类型为数组。定义路由表，每个路由包含以下字段：
path路径规则，可以使用 param（例如/user/:id）和通配符（例如/*）。handler路由处理函数。
scrollBehavior
可选，类型为对象。定义路由切换时的滚动行为。默认值为 {x: 0, y: 0}。包含以下字段：
x切换后 X 轴滚动的距离。y切换后 Y 轴滚动的距离。
base
可选，类型为字符串。定义应用程序的基路径。默认值为 ''。
hashPrefix
可选，类型为字符串。定义 hash 前缀。默认值为 ''。
historyFallback
可选，类型为布尔值。当浏览器不支持 history API 时，是否启用 URL 控制的路由。默认值为 false。
小结
通过本文的介绍，我们学习了 wee-router 的基本用法，包括路由表的定义、事件处理函数的编写以及手动触发路由切换。wee-router 虽然简单，但功能齐全，相信在开发小型项目或快速原型开发时会让你事半功倍。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6006710a8dd3466f61ffe0a3