前端微服务之路由篇-Universal Router

npm官网 https://www.npmjs.com/package/universal-router

Universal Router API

Using npm:

npm install universal-router --save

Or using a CDN like unpkg.com or jsDelivr with the following script tag:

<script src="https://unpkg.com/universal-router/universal-router.min.js"></script>

 实例

 

import UniversalRouter from 'universal-router'
 
const routes = [
  {
    path: '', // optional
    action: () => `<h1>Home</h1>`,
  },
  {
    path: '/posts',
    action: () => console.log('checking child routes for /posts'),
    children: [
      {
        path: '', // optional, matches both "/posts" and "/posts/"
        action: () => `<h1>Posts</h1>`,
      },
      {
        path: '/:id',
        action: (context) => `<h1>Post #${context.params.id}</h1>`,
      },
    ],
  },
]
 
const router = new UniversalRouter(routes)
 
router.resolve('/posts').then(html => {
  document.body.innerHTML = html // renders: <h1>Posts</h1>
})

const router = new UniversalRouter(routes, options)

1.创建一个通用路由器实例，该实例具有单个router.resolve() 方法。

UniversalRouter构造函数期望第一个routes参数的纯javascript对象具有任意数量的参数，其中只需要路径，或者这些对象的数组。第二个选项参数是可选的，您可以通过以下选项：

1.context    -----您想传递给resolveRoute函数任何数据的对象。

2.baseUrl  ------应用程序的基本URL。默认情况下是空字符串“”。公用的URL

如果应用程序中的所有URL都与其他“基础”URL相对应，请使用此选项。

3.resolveRoute  -----用于任何自定义路由处理逻辑的函数

例如，您可以定义此选项以声明的方式处理路由。

默认情况下，路由器调用匹配路由的动作方法。

4.errorHandler ---全局错误处理功能。