前端开发用到的库和框架数不胜数，其中一个很重要的部分就是路由。路由是指应用程序中定义的不同 URL 地址之间的映射关系。在前端页面中，可以使用 router 库来实现路由功能。
本文介绍了 npm 包 router.min.js 的使用教程，该库是一个轻量级的 JavaScript 路由库，可以轻松地实现单页应用程序的路由功能。本文将会介绍 npm 包 router.min.js 的基本使用、进阶使用以及示例代码。
基本使用
要使用 router.min.js，首先需要在项目中安装该库。使用以下命令在项目中安装 router.min.js。
npm install router.min.js --save
安装完成后，在项目中引入该库。
import Router from 'router.min.js';
接下来就可以使用 Router 创建路由。
const router = new Router({
routes: [
// 定义路由规则
]
})router 的 routes 属性是一个数组，表示定义的路由规则。在 routes 数组中，可以定义多个路由规则。
-- -------------------- ---- -------
-
------- -
-
----- ----
----- -------
---------- ----
--
-
----- ---------
----- --------
---------- -----
-
-
-以上代码段创建了两个路由规则，分别表示路径为 / 和路径为 /about 的两个页面。
接下来需要定义路由出口。
<div id="app"> <router-view></router-view> </div>
以上代码段定义了路由出口，路由渲染的组件会在这里显示。
至此，router 的基本使用已经完成。可以使用以下代码在应用程序中启动 router。
router.init();
进阶使用
在基本使用中，已经介绍了如何创建和渲染路由。但是在实际开发中，还需要进一步了解 router 的进阶用法。
动态路由
动态路由是指在路由规则中使用参数，可以使用动态路由来渲染不同的内容。例如，当访问 /user/1 和 /user/2 时，可以展示不同的用户信息。使用 router.min.js，可以使用以下方式定义动态路由。
-- -------------------- ---- -------
-
------- -
-
----- ------------
----- -------
---------- ----
-
-
-在上面的代码中，:id 是一个参数，表示用户的 ID。在 User 组件中，可以通过 $route 对象获取路由参数。
// User.vue
export default {
created() {
const id = this.$route.params.id;
// 根据 id 获取用户信息并渲染页面
}
}嵌套路由
嵌套路由是指在路由规则中定义子路由。例如，/user/1/posts 和 /user/1/comments 都是用户 1 的子路由。在 router.min.js 中，可以使用以下代码定义嵌套路由。
-- -------------------- ---- -------
-
------- -
-
----- ------------
---------- -----------
--------- -
-
----- --------
----- ------------
---------- ---------
--
-
----- -----------
----- ---------------
---------- ------------
-
-
-
-
-在上面的代码中，UserLayout 组件是用户信息组件的容器，其下可以包含子路由。并在子路由中定义了用户的文章列表和评论列表。
导航守卫
导航守卫是指在执行路由之前，可以添加一些前置操作和判断，例如验证登录状态、权限等等。在 router.min.js 中，可以使用以下代码定义导航守卫。
-- -------------------- ---- -------
-
------- -
-
----- ---------
----- --------
---------- ------------
------------ ---- ----- ----- -- -
-- --------
----- ------- - --------------------------------
-- ---------- -
----------
-------
-
-------
-
-
-
-在上面的代码中，beforeEnter 函数是一个导航守卫，用来判断用户是否登录，如果没有登录则跳转到首页。
示例代码
以下是一个使用 router.min.js 实现的简单示例代码。
-- -------------------- ---- -------
-- -------
------ --- ---- ------
------ ------ ---- ----------------
------ ---- ---- ------------------------
------ ----- ---- -------------------------
------ ---- ---- ------------------------
------ ---------- ---- ------------------------------
------ --------- ---- -----------------------------
------ ------------ ---- --------------------------------
------ ----------- ---- -------------------------------
------ ----- ---- -------------------------
----------------
----- ------ - --- --------
------- -
-
----- ----
----- -------
---------- ----
--
-
----- ---------
----- --------
---------- -----
--
-
----- ------------
----- -------
---------- ----
--
-
----- ------------
---------- -----------
--------- -
-
----- --------
----- ------------
---------- ---------
--
-
----- -----------
----- ---------------
---------- ------------
-
-
--
-
----- ---------
----- --------
---------- ------------
------------ ---- ----- ----- -- -
----- ------- - --------------------------------
-- ---------- -
----------
-------
-
-------
-
--
-
----- ---------
----- --------
---------- -----
-
-
---
--- -----
--- -------
-------
--------- -----------------------------
---
--------------<!-- index.html --> <div id="app"></div>
在上面的代码中，定义了 6 个路由规则，分别是首页、关于页、用户页、用户信息页、用户文章列表页、用户评论列表页、管理员页和登录页。在用户信息页中使用了动态路由，渲染不同的用户信息。在用户信息页中使用了嵌套路由，渲染用户文章列表和评论列表。在管理员页中使用了导航守卫，判断用户是否登录。以上代码是一个完整的使用 router.min.js 实现的路由示例。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bce967216659e244b5d