如何设置 Nuxt 动态路由分类页面和内容页面答案

【问题标题】：How to set Nuxt dynamic route category page and content page如何设置 Nuxt 动态路由分类页面和内容页面
【发布时间】：2020-11-18 19:06:24
【问题描述】：

我使用 NUXT 来构建我的项目。

这是我现在的文件结构：

pages/
--| work/
-----| index.vue
-----| _projectName.vue

我想这样做：

A: /work = all work list    
B: /work/_categoryName(like is "/work/web-design" = category "web desing" work list)
C: /work/_categoryName?type=A(like is "/work/web-design?type=A" = category "web desing" and type A work list)

D: /work/_projectName(like is "/work/XXXproject") = project content

A、B、C 使用相同的页面。 D 使用不同的页面和不同的布局。

我该怎么办？

更新：

如果上面我想做的方式不可行，或者尝试其他方式：

A: /work = all work list    
B: /work/_categoryName
C: /work/_categoryName?type=A

D: /work/content/_projectName

A、B、C 使用同一个页面我能怎么做？布局？成分？混音？

【问题讨论】：

如何区分类别和项目？对于路线/work/web-design，web-design 是否可能是项目名称和类别名称？
web-design 是示例。该类别是来自数据库的动态路由。是否可以使用 2 条动态路线？

标签： vue.js nuxt.js vue-router

【解决方案1】：

我认为这种结构可以满足您的需求

pages/
--| work/
-----| index.vue
-----| _projectName.vue
-----| web-design.vue   --> and use route parameter to accessing type

并在 _projectName.vue 中像这个例子一样设置布局

_projectName.vue

<script>
export default {
  layout: 'the-layout'

.....

【讨论】：

感谢您的回答。但是/work 和/web-design 是相同的内容。它们只是不同的类别，类别是动态数据。我认为这种方式不适合我的项目。