vue3.x教程：路由组件（页面组件）与views、pages目录-马育民老师

# 路由组件（页面组件）
通过路由 `component` 加载，对应浏览器一个页面路由，称之为：路由组件（页面组件），放在 `views` 或 `pages`。
```ts
{
  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` 文件夹。

# 对比

| 目录 | 主流适用项目 | 配套路由方式 | 生态来源 |
|------|-------------|-------------|----------|
| `views` | 后台管理系统（Admin） | **手动配置路由表**（传统router/index.ts） | Vue CLI / Element Plus Admin |
| `pages` | 官网、H5、前台项目 | 优先 **自动文件路由（vite-plugin-pages）** | Nuxt、Vite生态 |

### 选择

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

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

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

原文出处：http://malaoshi.top/show_1GW3mWJgqggC.html