什么是 just-router
just-router 是一款轻量级的路由组件，适用于 React 和 Vue 等前端框架。它可以帮助你快速、简便地实现前端路由功能，同时它具有灵活性和扩展性，可以满足不同的项目需求。
安装
你可以通过 npm 安装 just-router：
npm install just-router
使用
以下是如何在 React 中使用 just-router 的示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ------ ---- - ---- --------------
----- ---- - -- -- --------------
----- ----- - -- -- ---------------
----- --- - -- -- -
-----
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
-----
------
--------
------ -------- ----- ---------------- --
------ ------------- ----------------- --
---------
------
--
------ ------- ----在上面的例子中，我们首先导入了 Router、Route 和 Link 组件。然后，我们定义了两个组件 Home 和 About。在 App 组件中，我们创建了一个简单的导航菜单，并使用 Router 和 Route 组件来定义路由。
注意，在 Route 组件中，我们可以指定 path 属性和 component 属性。path 属性指定了路由的匹配规则，component 属性指定了路由匹配成功后要渲染的组件。
Link 组件可以帮助我们快速地生成路由链接。
高级功能
在一些项目中，更高级的路由功能是必要的。just-router 也提供了一些高级功能。
嵌套路由
just-router 支持嵌套路由。例如，我们可以在 About 组件中添加一个嵌套的路由：
-- -------------------- ---- -------
----- ----- - -- -- -
-----
--------------
-----
----
----
----- ------------------------------------
-----
----
----- ----------------------------------
-----
-----
------
--------
------ ---------------------- -------------------- --
------ --------------------- ------------------- --
---------
------
--在上面的例子中，我们创建了一个名为 About 的组件，并定义了两个子路由 Overview 和 History。我们可以通过 Link 组件来创建子路由链接。
动态路由
在一些情况下，我们需要创建动态路由，just-router 也提供了相应的支持：
-- -------------------- ---- -------
----- -------- - -- -- -
-----
-----------------
--------
------ -------------------- ------------------- --
---------
------
--
----- ------- - ------- -- -
-----
----------- ----------------------------
---------- ---- --------
------
--在上面的例子中，我们定义了一个名为 Articles 的组件，并创建了一个动态路由 /articles/:id。当用户访问 /articles/1 时，就会渲染 Article 组件，并且 props.match.params.id 的值为 1。
路由守卫
路由守卫允许我们在渲染路由之前执行一些操作，例如身份验证和权限检查。just-router 提供了 beforeEnter 路由守卫：
-- -------------------- ---- -------
----- ------- - -- ----- -- -- ---------- ----------------------
----- --------- - -- -- -
----- --------------- - ----------------------------------------
-- ------------------ -
------------- ----- -- ------ ---- -------
------ ------
-
------ -----
--
----- ------ - -
-
----- ----------------
---------- --------
------------ ----------
--
--在上面的例子中，我们定义了一个名为 checkAuth 的函数，用于检查用户是否已经登录。然后，我们创建了一个动态路由 /articles/:id，并在路由配置中添加了 beforeEnter 守卫。在守卫函数中，我们检查用户是否已经登录。如果用户未登录，我们弹出一个提示框，并返回 false。否则，我们返回 true。
结论
到此为止，我们已经介绍了如何使用 just-router 执行基本的路由操作以及如何使用其高级功能。just-router 是一个非常灵活的路由库，可以满足不同的项目需求。使用 just-router 可以使我们的项目变得更加简洁、易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d2d81e8991b448dae77