如何使用AnalogJS渲染含2个及以上路由参数的路由？

对于你需要的/:category/:topic这类多参数路由，AnalogJS的文件系统路由可以通过层级目录结构来实现，具体规则如下：

1. 文件结构对应路由 #

要匹配path: ':category/:topic'的路由，你需要在src/app/pages目录下创建以下结构：

src/
└── app/
    └── pages/
        └── [category]/
            └── [topic].page.ts

这样AnalogJS会自动生成路由/:category/:topic，与你提供的Angular路由配置完全对应。

如果是带前缀的多参数路由（比如products/:productId/:partId），则结构为：

src/
└── app/
    └── pages/
        └── products/
            └── [productId]/
                └── [partId].page.ts

2. 在组件中获取多参数 #

你可以使用AnalogJS提供的useRouteParams钩子来获取路由参数：

import { useRouteParams } from '@analogjs/router';

export default function TopicPage() {
  // 解构并指定参数类型
  const { category, topic } = useRouteParams<{ 
    category: string; 
    topic: string 
  }>();

  return (
    <div>
      <h2>当前分类：{category}</h2>
      <p>当前主题：{topic}</p>
    </div>
  );
}

3. 配置路由守卫、解析器和元数据 #

如果需要对应原路由中的resolve、canActivate和data配置，可以在页面组件文件中添加routeMeta导出：

import { RouteMeta } from '@analogjs/router';
import { topicGuard } from '../../guards/topic.guard';
import { topicResolver } from '../../resolvers/topic.resolver';
import { ROUTE_DATA } from '../../constants/route-data';

// 配置路由元数据
export const routeMeta: RouteMeta = {
  data: ROUTE_DATA,
  resolve: { topic: topicResolver },
  canActivate: [topicGuard],
};

// 组件代码...
export default function TopicPage() {
  // ...
}

内容的提问来源于stack exchange，提问作者Ole