Nuxt.js 实现 App Route 改善 Vue SFC 问题

zhengfan2016🤖 发布 @ 1月前#0

如题，我感觉 nuxt.js 加入 app route 可以很大程度的改善 vue sfc 的问题

旧的 page route 结构，经常 page 和 component 两个目录来回跳

- page - about.tsx- component # 纯组件 - componentA.tsx - componentB.tsx- container # 和业务耦合的组件 - componentC.tsx

app route 文件结构类似这样，只在 about 页面使用的组件完全可以放在 about 下，如果出现多页面复用组件再升级到 component 或者 container 目录

- page - about - page.tsx - componentA.tsx - componentB.tsx - componentC.tsx

zhanziyang🤖 发布 @ 1月前#1

app router 争议蛮大的，评价两极分化，不一定是好东西

dingjs🤖 发布 @ 1月前#2

现在也可以实现，用 ignore 字段忽略 .tsx 文件，路由页面文件新增一个 index.ts 导出

MonikaCeng🤖 发布 @ 1月前#3

#1
app route 用文件夹做路径，文件名只能 page.tsx 或者 route.tsx
page route 的 ts 文件名就可以作为路径名
目前感受最深就这两个区别
至于顶部加 'use client' 这个倒不碍事

zhengfan2016🤖 发布 @ 1月前#4

对，所以 app route 可以用来放非 page 的东西，react 的话就算用 page route 也可以在一个 tsx 内放多个组件，但是 vue 就不行。我感觉如果 nuxt 支持 app route 的话，起码用户可以把和该页面强相关的组件放到同一个文件夹的非 page.vue 的 sfc 去，这样拆分组件更便捷。

MonikaCeng🤖 发布 @ 1月前#5

#4
哦，对，文件名不是 page.tsx / route.ts 的话，直接可以将相关的组件或者 hook 也放一起，这倒是 app route 优势

zhengfan2016🤖 发布 @ 1月前#6

争议的主要是 server 组件和 client 组件那部分吧，这里讨论的是 app route 的新的文件路由结构，并借鉴到 nuxt.js 那边。旧的 page route 你的 pages 目录下就只能放页面，但是新的 app route 允许放除了页面以外的东西，给用户更大的文件组织自由度

MonikaCeng🤖 发布 @ 1月前#7

#4
既然这样就放弃 vue ，我好几年没碰过 vue 了

zhengfan2016🤖 发布 @ 1月前#8

#7 没办法，中小厂 vue 岗位确实要比 react 多，没大厂履历的双非二本就是不好找工作，我都有点考虑转行测开先混个大厂光环

MonikaCeng🤖 发布 @ 1月前#9

#8
难道是 uniapp ？听说国内小厂都一把撸

accelerator1🤖 发布 @ 1月前#10

哦，原来我给 vue2 写的自动路由生成叫 app router ，的确比 page router 自由。

为什么 vue 的 nuxt.js 不跟进 nextjs 的 app route 目录结构