npm包 @nekr/navigo 使用教程

简介

随着前端技术的不断发展，前端框架和工具也愈发繁杂。@nekr/navigo 是一个轻量级的路由库，可用于单页应用程序的导航和 url 识别。它支持正则表达式，缺省路由，路由过滤器等特性，可以让我们更加方便地管理前端路由。

基础使用

安装

使用 npm 安装：

npm install @nekr/navigo

第一步：定义导航

在模块中定义导航：

import Navigo from '@nekr/navigo';

const router = new Navigo('/', true);

router.on('/', function () {
  console.log('Homepage');
}).resolve();

第二步：启动导航

使用 resolve 方法 启动导航:

router.resolve(); // 初始化路由

第三步：添加匹配规则

router.on('/about', function () {
  console.log('About Us');
}).resolve();

现在，只要访问 'about'，就会打印出 'About Us'。

进阶使用

参数传递

在路由路径中添加参数：

router.on('/users/:id', function ({ data: { id } }) {
  console.log(`User ${id}`);
}).resolve();

访问 '/users/123'，会打印出 'User 123'。

正则匹配

router.on(/blog\/(\d+)/, function ({ data: [_, postid]}) {
  console.log(`Post ${postid}`);
}).resolve();

访问 '/blog/123'，会打印出 'Post 123'。

缺省路径

router.on('/blog/*/*/*', function({ url }) {
  console.log(`Article ${url}`);
}).resolve();

访问 '/blog/12/13/foo'，会打印出 'Article /12/13/foo'。

路由过滤器

router.on('/*', function () {
  // middleware
  console.log('before matched');
}).resolve();

访问任意路径前，都会打印 'before matched'。

总结

@nekr/navigo 是一个功能强大、易于使用和适用性广泛的路由库。我们可以根据自己的需求，配置路由规则，进行前端导航。在项目中，深入使用 @nekr/navigo 可以大大提高前端开发效率，值得我们深入学习和掌握。

示例代码：Github

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ced81e8991b448da89b