Glimmer 是一种快速、轻量级的 JavaScript 框架，它允许您构建高性能的 Web 应用程序。在 Glimmer 中，路由是一个非常重要的概念，它允许您管理 UI 的状态和组织 UI 的结构。在本文中，我们将学习如何使用 npm 包 glimmer-router 来实现路由功能，并包含示例代码。
安装 glimmer-router
使用 glimmer-router 需要在项目中安装它。您可以使用 npm 或 yarn 来完成安装。
使用 npm：
npm install glimmer-router
使用 yarn：
yarn add glimmer-router
创建路由文件
在使用 glimmer-router 时，您需要创建一个 router.js 文件来定义路由。该文件应该导出一个包含路由的对象。在路由对象中，您可以定义路由处理程序、路由参数和默认路由等。
下面是一个基本的路由文件示例：
-- -------------------- ---- -------
------ ----- ---- -------------------------
----- ---------- ------- ----- --
----- ---------- ------- ----- --
------ ------- ----- ------ -
-------------------- -
------------ - --------
-
--- -------- -
------ -
------ -
------ ----
-------- -----------
--
------ -
------ ---------
-------- ----------
-
--
-
-在此路由文件中，我们定义了两个路由处理程序：IndexRoute 和 AboutRoute。我们还定义两个路由：index 和 about。路由对象由一个选项对象初始化，该对象包含诸如模板服务和 URL 路由器等选项。我们还使用 ES6 的 getter 语法来返回路由对象。
注册路由
接下来，我们需要在应用程序中注册路由。我们需要从 glimmer 路由器的 Router 类中创建一个实例，并将其传递给应用程序。在 Glimmer 应用程序中，您可以在 index.js 文件中完成此操作。
-- -------------------- ---- ------- ------ ---------------- ---- ----------------------- ------ ------ ---- -------------- ----- --- - ---------------- --------- --------- --------- --- -------- ------ --- --- ----- ------ - --- -------- --------- ---------------- -------- -------------- --- ---------------------------
在此示例中，我们将设置我们的应用程序为 my-app，并指定解析器的配置。我们还创建了一个新的 Router 实例并将其注册到我的应用程序中。
创建路由处理程序
我们现在需要通过创建路由处理程序来定义每个路由的行为。在 Glimmer 中，路由处理程序是类，实现了 @glimer/routing/route 中的 Route 类。Route 类提供了一些钩子函数，可以帮助您控制路由的行为。下面是一个路由处理程序示例：
-- -------------------- ---- -------
------ ----- ---- -------------------------
----- ---------- ------- ----- -
----------------------- -
-- -----------------
------------------- ----- -------
-- ------
------ ------------------------------
-
------------- ----------- -
-- ---------
------------------ -------
------ -
------ ------ ----
----- ----------- -- --- ----- -- -----------
--
-
----------------- ----------- -
-- ------------------
------------------ ----- -------
-- ------
------ ----------------------- ------------
-
--------------------------- ------ -
-- --------
------------------ ---------- -------
----------------------- -------------
---------------------- ------------
-- ------
------ --------------------------------- -------
-
-
------ ------- -----------在此示例中，我们定义了一个 AboutRoute 路由处理程序。我们覆盖了 Route 类中的三个钩子函数：beforeModel、model 和 afterModel。我们还在 setupController 钩子函数中更新控制器的数据。
创建控制器和模板
现在我们需要创建用于渲染路由的控制器和模板。我们创建一个名为 about.hbs 的文件来设置模板，然后一个控制器类来处理数据。下面是如何完成此操作的：
about.hbs：
<h2>{{title}}</h2>
{{{body}}}about.js：
import Controller from '@glimmer/controller';
export default class AboutController extends Controller {}在此示例中，我们定义了一个控制器类 AboutController，该控制器类扩展了 @glimmer/controller 中的 Controller 类。我们还定义了一个名为 about.hbs 的 Handlebars 模板来渲染数据。
整合路由
我们现在需要在 index.hbs 文件中添加路由链接，以便转到 about 路由。
-- -------------------- ---- -------
-----
----
------ ----------------------
------ ----------------------------
-----
------
------
----------
-------在该示例中，我们添加了一个导航链接，该链接包括转到我们的两个路由的链接。并且我们使用 outlet 辅助组件来显示路由处理程序所渲染的内容。
到这里，我们已经看到了如何使用 glimmer-router 来创建路由和控制器，并将它们整合到应用程序中来呈现 UI。该包提供了一个可扩展的系统，以便您可以自定义路由和路由处理程序来满足您的需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005665b81e8991b448e27eb