在前端开发中，我们经常需要在单页应用程序（SPA）中实现页面路由。director 是一个流行的 JavaScript 路由库，可以帮助我们轻松地处理路由和 URL。
安装
在使用 director 之前，我们需要先安装它。可以通过以下命令使用 npm 进行安装：
npm install director --save
基本用法
首先，让我们创建一个简单的 HTML 文件，其中包含一个链接，当用户单击该链接时，将在页面上显示一条消息。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------- ----------------
-------
------
----------- -- -- -------------
-- -------------------- ------
---- -------------------
------- -----------------------------------
--------
--- ---------- - -----------------------------------
-------- ------------------ -
-------------------- - -------- -- --- - - -------- - - -------
-
---------
-------
-------接下来，我们将使用 director 来处理路由。请添加以下代码到 <script> 标签中：
var router = new Router({
'/about': function() { showPage('About'); }
});
router.init();这个代码片段实例化了一个 Router 对象，并指定了一个路由规则，当 URL 中出现 #/about 时，将调用 showPage('About') 函数。
现在，在我们单击链接时，应该会看到页面上显示消息“Welcome to the About page!”。
动态路由
使用动态路由可以使我们更灵活地处理 URL 和参数。下面是一个示例代码，它将展示如何使用动态路由：
var router = new Router({
'/users/:id': function(id) { showPage('User ' + id); }
});
router.init();这个代码片段创建了一个路由规则，当 URL 中包含 /users/ 并且后面跟着任意数字时，将调用 showPage() 函数，并将用户 ID 作为参数传递给它。
其他功能
除了基本的路由功能之外，director 还提供了其他一些有用的功能，例如路由重定向和路由过滤器。下面是一个示例代码，它将展示如何使用这些功能：
-- -------------------- ---- -------
--- ------ - --- --------
-------- -
--- ---------- - ----------------- ---- ---------- --
------ ---------- - ----------------- ---- ------------- -
--
--------- ---------- - -------------------- -
---
------------------
--------- ---------- - ---------------- - ---- --- --------- -
---
--------------
-------- --------------- -
---------------------
-这个代码片段创建了两个路由规则，分别对应于 /home 和 /login。当用户访问 /home 时，将调用 on() 方法，在页面显示后将调用 after() 方法。当用户访问 /login 时，将重定向到 /home。
除此之外，通过 configure() 方法，我们还可以设置一个“未找到”处理程序（如上述代码片段中的 notfound() 函数），它将在用户访问不存在的 URL 时被调用。
结论
在这篇文章中，我们学习了如何使用 director 包来实现 JavaScript 路由。我们了解了基本的路由功能以及一些其他有用的功能，例如路由重定向和路由过滤器。
使用 director 可以使我们更轻松地管理单页应用程序的路由，并提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/49475