不少做 Vue 项目的同学纠结过，自己手动配 Vue Router，还是用 Nuxt 自动生成的路由？这俩在路由逻辑、适用场景、开发体验上差别不小，选对了能少走弯路。今天拆解下核心区别和怎么选~

terry 19小时前阅读数 15 #Vue

文章标签 Vue Router；Nuxt

各自路由是咋工作的？

先看 Vue Router：它是 Vue 生态里专门管单页应用（SPA）路由的库，你得在项目里建个 router.js，手动写路由规则——比如定义哪个 path 对应哪个组件，需不需要懒加载（像 component: () => import('@/views/Home.vue') 这种写法），整个应用是单页，切换路由时页面不刷新，靠 JS 动态替换组件，适合纯前端交互多的场景，但如果没做服务端渲染（SSR），首屏会是空白（因为要等 JS 加载完再渲染），对搜索引擎（SEO）也不友好。

再看 Nuxt 路由：它基于「文件系统即路由」的思路，你只要在 pages 目录下建 .vue 文件，Nuxt 会自动帮你生成路由配置。pages/index.vue 对应根路径，pages/blog/index.vue 对应 /blog，pages/blog/_id.vue 对应 /blog/:id（动态路由，下划线开头的文件代表动态参数），Nuxt 默认支持服务端渲染（SSR）、静态站点生成（SSG），路由切换时能结合服务端逻辑，首屏可以直接返回渲染好的 HTML，对 SEO 友好。

适用场景：啥项目适合用哪个？

先看 Vue Router 的主战场：

纯 SPA 项目，比如后台管理系统（用户登录后操作表格、表单，SEO 不重要）；
交互特别复杂的前端应用，比如在线编辑器、富交互的工具类产品；
团队更习惯手动控制路由细节，比如复杂的权限控制（不同角色显示不同路由）、多级嵌套路由（像后台布局里有侧边栏 + 标签栏 + 内容区，路由嵌套多层）。

再看 Nuxt 的优势场景：

需要 SEO 的项目，比如博客、企业官网、电商商品列表页（搜索引擎能抓到完整 HTML，排名更友好）；
首屏加载速度敏感的项目，比如营销页、活动页，用 Nuxt 的 SSG 生成静态 HTML，用户打开直接看，不用等 JS 执行；
想快速搭服务端渲染应用，但不想自己配 Node 服务、处理 SSR 逻辑的团队（Nuxt 把 SSR 流程封装好了，写 asyncData 就能在服务端取数据渲染）。

举个实际例子：做公司官网，有首页、关于我们、产品介绍这些页面，内容固定但需要 SEO，用 Nuxt 的 SSG 模式，把页面生成静态文件部署，加载快还能被百度收录；做公司内部的客户管理系统，只有员工登录后能用，交互多但不需要 SEO，用 Vue Router 搭 SPA 更合适。

路由配置：手动写和自动生成有啥利弊？

Vue Router 是「手动配置自由派」：

优点：想咋配就咋配，嵌套路由、动态路由、路由守卫（像 beforeEach 这些）完全自己控制，适合业务逻辑复杂的场景，比如做权限系统，每个路由加 meta 字段标记是否需要登录，全局守卫里判断；
缺点：项目大了之后，router.js 文件会变得很臃肿，新增页面得手动加路由，容易漏配；团队协作时，新人得先理解路由配置逻辑，学习成本稍高。

Nuxt 是「约定大于配置的自动化派」：

优点：不用写路由配置！建个文件就有路由，结构清晰（看 pages 目录就知道有哪些页面），动态路由靠文件名（_xxx.vue）自动识别，还能通过 middleware 目录写路由中间件（比如验证用户是否登录），一套约定下来，开发效率高；
缺点：灵活性稍弱，比如想做特别定制化的路由逻辑（比如同一个路径根据用户角色渲染不同组件），得绕一下；动态路由参数只能通过 $route.params 取，命名得按 Nuxt 的规则来，习惯了自由配置的同学可能觉得「被管着」。

性能与 SEO：对项目优化影响有多大？

SEO 这块，Vue Router 的 SPA 天生吃亏：搜索引擎爬取时，看到的是空白页面（因为 JS 还没执行），除非额外做 SSR（比如自己配 Node 服务，用 vue-server-renderer），但这对很多团队来说成本高，而 Nuxt 默认支持 SSR 和 SSG：

SSR 模式：用户请求时，服务端先渲染好 HTML 再返回，搜索引擎能直接抓到内容，首屏加载快（用户不用等 JS 加载完再看到内容）；
SSG 模式：构建时把页面生成静态 HTML 文件，部署后直接返回，性能比 SSR 还快，适合内容静态或变化少的页面。

性能优化方面，Vue Router 做 SPA 时，路由懒加载（component: () => import()）能减小首屏 JS 体积；Nuxt 的自动路由也支持懒加载，而且因为有服务端渲染，首屏白屏时间更短，但 Nuxt 项目如果用 SSR，服务端资源消耗会比纯 SPA 高，得考虑服务器成本；用 SSG 的话，静态文件部署很轻量，和纯静态网站差不多。

开发体验：写代码时差别有多大？

写 Vue Router 的项目，得先建 router.js，定义路由数组：

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/user/:id', component: User, props: true }
  ]
})

然后在组件里用 <router-link> 跳转，用 this.$router.push() 导航，如果有嵌套路由，还得在父组件里写 <router-view>，子路由再嵌套，层级多了容易乱。

Nuxt 的开发体验更「省心」：

页面文件放 pages 里，自动生成路由，不用管 router.js；
跳转用 <NuxtLink to="/about">，和 <router-link> 用法差不多，但 NuxtLink 在服务端渲染时更友好；
页面组件里可以用 asyncData 方法，在服务端或构建时获取数据，
```
export default {
async asyncData({ $axios, params }) {
  const res = await $axios.get(`/api/user/${params.id}`)
  return { user: res.data }
}
}
```
这样数据在页面渲染前就拿到了，避免 SPA 里常见的「先渲染再请求，页面闪一下」的问题。