# 页面布局

### Layout <a href="#layout" id="layout"></a>

除登录页和404页面外，其他页面的采用统一的布局文件。包含一个产品最外层的框架结构，导航、侧边栏、面包屑以及内容等。

{% hint style="info" %}
对应代码：[ MainLayout.vue](https://github.com/ccqiuqiu/iface/blob/f3bf733342f9151e62af6dbfe0c92145979e8caa/src/modules/common/view/MainLayout.vue)
{% endhint %}

## 路由嵌套

项目路由结构大致如下：

```javascript
const router = new Router({
  routes: [
    ...publicRouter,
    {
      path: '/',
      component: MainLayout,
      children: [
        ...common,
        ...system,
        ...demo,
      ],
    },
    {
      path: '*',
      component: Page404,
    },
  ],
})
```

* 除publicRouter里面的页面（登录等）和404页面外，其他页面统一使用MianLayout作为布局文件
* 每个模块的路由在模块文件夹下的router.ts单独维护，统一导出到全局的路由配置

## router-view

为简化路由配置，项目的路由总共嵌套2层，分别对应如下的router-view组件

1. [App.vue](https://github.com/ccqiuqiu/iface/blob/f3bf733342f9151e62af6dbfe0c92145979e8caa/src/App.vue)
2. [MainLayout.vue](https://github.com/ccqiuqiu/iface/blob/f3bf733342f9151e62af6dbfe0c92145979e8caa/src/modules/common/view/MainLayout.vue)

{% hint style="info" %}
一般情况下，不要再增加路由的层级
{% endhint %}

## 总体布局如下

* 左侧菜单：[MenuView.vue](https://github.com/ccqiuqiu/iface/blob/f3bf733342f9151e62af6dbfe0c92145979e8caa/src/modules/common/view/MenuView.vue)
* 顶部面包屑：[NavView.vue](https://github.com/ccqiuqiu/iface/blob/f3bf733342f9151e62af6dbfe0c92145979e8caa/src/modules/common/view/NavView.vue)
* 顶部标签页：[TabsView.vue](https://github.com/ccqiuqiu/iface/blob/f3bf733342f9151e62af6dbfe0c92145979e8caa/src/modules/common/view/TabsView.vue)
* 内容部分：content-view 对应路由组件

![](https://2600009127-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LEmErm6AdH8pQRwLE4L%2F-LEmZtDR3eDRrk75hNOS%2F-LEmiv21IKm-2a7X4rv3%2FQQ20180612-142600%402x.jpg?alt=media\&token=07784ea8-440d-489b-97ee-e25756236568)

�

## 关于滚动

* 左侧菜单超过屏幕高度时会开启滚动
* content-view高度占满内容区域，当里面的内容超过高度的时候，会开启滚动
* 顶部固定不滚动


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ccqiuqiu.gitbook.io/iface/ru-men/ye-mian-bu-ju.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.