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

最新推荐文章于 2024-09-14 08:21:02 发布

哎呦喂1111

最新推荐文章于 2024-09-14 08:21:02 发布

阅读量3.8k

点赞数

分类专栏： web前端文章标签：前端微服务之路由篇-Universal Router

本文链接：https://blog.csdn.net/qq_31965515/article/details/83416816

版权

本文介绍了Universal Router在前端微服务中的使用，包括如何安装、配置路由、处理URL参数、实现异步路由和中间件功能。Universal Router支持动态生成URL和路由重定向，适用于复杂的前端路由管理。

摘要由CSDN通过智能技术生成

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.errorHand