动态路由前缀
Closed this issue · 8 comments
最近在研究使用这个框架,在nextjs中,可以通过目录名来动态实现,拿个最常见的使用场景,比如国际化路由前缀,该怎么实现呢,比如:
www.xxx.com/zh
www.xxx.com/zh/about
www.xxx.com/zh/news/detail?id=122
能否给个实现思路或简单代码示例?谢谢~
ssr
框架同样可以通过目录名来生成路由。例如创建pages/zh/render.vue
等于/zh
路由, /pages/zh/about/render.vue
等于 /zh/about
路由。
也可以使用固定的config.prefix
或者动态prefix 使得不需要创建zh
文件夹,直接给路由层面添加统一的前缀即可
嗯,刚看了文档中动态prefix的示例,但是没太看懂,比如我要实现news.controller.ts,改造前是这样
@Controller('news')
export class AppController {
//...省略
@Get('list')
async handlerIndex (@Req() req: Request, @Res() res: Response): Promise<void> {
const ctx = {
request: req,
response: res,
apiService: this.apiService
}
const stream = await render(ctx, {
stream: true,
onError: (err) => {
console.log('ssr error', err)
render(ctx, {
stream: true
}).then(csrStream => {
csrStream.pipe(res)
})
return null
},
onReady () {
// for normal ssr end
stream.pipe(res)
}
})
}
@Get('detail:id')
async handlerDetail (@Req() req: Request, @Res() res: Response): Promise<void> {
const ctx = {
request: req,
response: res,
apiService: this.apiService
}
const stream = await render(ctx, {
stream: true,
onError: (err) => {
console.log('ssr error', err)
render(ctx, {
stream: true
}).then(csrStream => {
csrStream.pipe(res)
})
return null
},
onReady () {
// for normal ssr end
stream.pipe(res)
}
})
}
}
那如果想通过动态prefix支持国际化路由,我该怎么写呢
配置动态路由前缀为prefix:/zh
后也就是浏览器打开localhost:3000/zh/list
等于访问到pages/list/render.vue
组件,也就是前端router的/list
路由。zh为基准path无需在前端路由中添加
嗯,原理是这样,但是我上面所写的news.controller.ts的根路由不是/
,而是/news
【news.controller.ts的根路径是@controller('news') 不是@controller('/')】,接合动态路由示例和我理解的,那是不是如果想支持动态prefix是不是原来的多个控制器都要统一写在index.controller.ts中,并且包含不同handler不同语言handler,比如/zh/news => handlerZhNews, /zh/news/detail => handlerZhNewsDetail.....
路由支持通配符,自行查询对应的Node.js框架文档
你写在了onError里面。。。先看懂示例代码的含义
哦,忘记上面的了.........