路由组件（页面组件）

通过路由 component 加载，对应浏览器一个页面路由，称之为：路由组件（页面组件），放在 views 或 pages。

{
  path: '/user',
  component: () => import('@/views/user/index.vue') // 路由组件
}

一句话解释

通过路由显示的组件，就是路由组件（页面组件）

普通组件

被页面内部引用、不直接绑定路由，统一放在 components/ 目录

views目录

传统 Vue 项目主流，Vue2/Vue3 老规范

来源：Vue CLI、Element Admin、VueAdmin 后台模板标准约定

• 含义：视图、页面视图
• 适用场景：后台管理系统、中台项目
• 目录风格：按模块划分

src/
├── views/          # 路由页面【路由组件存放地】
│   ├── Home.vue
│   ├── User.vue
│   └── Login/
│       └── Index.vue

✅ 特点：
后台项目模块多、权限路由复杂，大量嵌套页面，长期行业通用。

pages目录

Vite、Nuxt、UniApp、新项目、前端官网常用

来源：Nuxt、Next.js 文件路由（约定式路由）思想

• 含义：页面
• 适用场景：官网、移动端、前台项目、使用文件自动路由的项目
• 典型搭配：vite-plugin-pages（自动根据pages目录生成路由）

src/pages/
  login.vue
  dashboard.vue
  system/
    user.vue

当使用 vite-plugin-pages 自动路由 时，必须用 pages，插件默认扫描 pages 文件夹。

对比

选择

1. 后台管理系统、手写路由表 → 推荐 views
2. 前台官网、想开启自动路由 vite-plugin-pages → 推荐 pages

注意：项目二选一，不要同时混用，统一规范！

总结

• ✅ views：手动配置路由、后台管理系统首选；传统Vue生态标准
• ✅ pages：自动文件路由、官网/H5前台、Nuxt风格；UniApp强制使用
• 本质上没有技术强制限制，只是社区约定；团队统一即可。

原文出处：/show_1GW3mWJgqggC.html