开源项目 `nanorouter` 使用教程

开源项目 nanorouter 使用教程

nanorouter🛤 - Small frontend router项目地址:https://gitcode.com/gh_mirrors/na/nanorouter

1. 项目的目录结构及介绍

nanorouter 是一个轻量级的路由库，适用于小型项目或微服务架构。以下是其基本的目录结构：

nanorouter/
├── README.md
├── package.json
├── src/
│   ├── index.js
│   └── router.js
└── test/
    └── router.test.js

• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置文件。
• src/: 源代码目录。
  • index.js: 项目入口文件。
  • router.js: 路由配置文件。
• test/: 测试代码目录。
  • router.test.js: 路由测试文件。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js。以下是其基本内容：

const nanorouter = require('./router');

const router = nanorouter({
  default: '/404'
});

router.on('/', (params) => {
  console.log('Home page');
});

router.on('/about', (params) => {
  console.log('About page');
});

router.on('/404', (params) => {
  console.log('Page not found');
});

module.exports = router;

• require('./router'): 引入路由配置文件。
• nanorouter({ default: '/404' }): 创建路由实例，并设置默认路由。
• router.on('/', ...): 定义根路由的处理函数。
• router.on('/about', ...): 定义关于页面的处理函数。
• router.on('/404', ...): 定义404页面的处理函数。

3. 项目的配置文件介绍

项目的配置文件是 src/router.js。以下是其基本内容：

const nanorouter = require('nanorouter');

module.exports = function(options) {
  const router = nanorouter(options);

  return router;
};

• require('nanorouter'): 引入 nanorouter 库。
• module.exports: 导出一个函数，该函数接收选项并返回一个路由实例。

通过以上配置，可以灵活地定义和扩展路由规则。

nanorouter🛤 - Small frontend router项目地址:https://gitcode.com/gh_mirrors/na/nanorouter