# 布局
頁面整體布局是一個產品最外層的框架結構，往往會包含導航、側邊欄、面包屑以及內容等。想要了解一個后臺項目，先要了解它的基礎布局。
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/layout.html#layout)Layout
對應代碼
[@/layout](https://github.com/PanJiaChen/vue-element-admin/tree/master/src/layout)
`@`是 webpack 的[alias](https://webpack.js.org/configuration/resolve/#resolve-alias)不懂得請自行研究
`vue-element-admin`中大部分頁面都是基于這個`layout`的，除了個別頁面如：`login`,`404`,`401`等頁面沒有使用該`layout`。如果你想在一個項目中有多種不同的`layout`也是很方便的，只要在一級路由那里選擇不同的`layout`組件就行。
~~~
// No layout
{
path: '/401',
component: () => import('errorPage/401')
}
// Has layout
{
path: '/documentation',
// 你可以選擇不同的layout組件
component: Layout,
// 這里開始對應的路由都會顯示在app-main中 如上圖所示
children: [{
path: 'index',
component: () => import('documentation/index'),
name: 'documentation'
}]
}
~~~
這里使用了 vue-router[路由嵌套](https://router.vuejs.org/zh/guide/essentials/nested-routes.html), 所以一般情況下，你增加或者修改頁面只會影響`app-main`這個主體區域。其它配置在`layout`中的內容如：側邊欄或者導航欄都是不會隨著你主體頁面變化而變化的。
~~~
/foo /bar
+------------------+ +-----------------+
| layout | | layout |
| +--------------+ | | +-------------+ |
| | foo.vue | | +------------> | | bar.vue | |
| | | | | | | |
| +--------------+ | | +-------------+ |
+------------------+ +-----------------+
~~~
當然你也可以一個項目里面使用多個不同的`layout`，只要在你想作用的路由父級上引用它就可以了。
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/layout.html#app-main)app-main
對應代碼
[@/layout/components/AppMain](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/layout/components/AppMain.vue)
這里在`app-main`外部包了一層`keep-alive`主要是為了緩存`<router-view>`的，配合頁面的`tabs-view`標簽導航使用，如不需要可自行[去除](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/tags-view.html)。
其中`transition`定義了頁面之間切換動畫，可以根據自己的需求，自行修改轉場動畫。相關[文檔](https://cn.vuejs.org/v2/guide/transitions.html)。默認提供了`fade`和`fade-transform`兩個轉場動畫，具體 css 實現見[transition.scss](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/styles/transition.scss)。如果需要調整可在[AppMain.vue](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/layout/components/AppMain.vue)中調整`transition`的`name`。
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/layout.html#router-view)router-view
**Different router the same component vue**真實的業務場景中，這種情況很多。比如：
我`創建`和`編輯`的頁面使用的是同一個 component，默認情況下這兩個頁面切換時并不會觸發 vue 的 created 或者 mounted 鉤子，[官方說](https://router.vuejs.org/zh/guide/advanced/data-fetching.html#%E6%95%B0%E6%8D%AE%E8%8E%B7%E5%8F%96)你可以通過 watch $route 的變化來進行處理，但說真的還是蠻麻煩的。后來發現其實可以簡單的在`router-view`上加上一個唯一的 key，來保證路由切換時都會重新渲染觸發鉤子了。這樣簡單的多了。
~~~
<router-view :key="key"></router-view>
computed: {
key() {
// 只要保證 key 唯一性就可以了，保證不同頁面的 key 不相同
return this.$route.fullPath
}
}
~~~
> ## TIP
>
> **或者**可以像本項目中`editForm`和`createForm`聲明兩個不同的 view 但引入同一個 component。
>
> 示例代碼：[@/views/example](https://github.com/PanJiaChen/vue-element-admin/tree/master/src/views/example)
~~~
<!-- create.vue -->
<template>
<article-detail :is-edit='false'></article-detail> //create
</template>
<script>
import ArticleDetail from './components/ArticleDetail'
</script>
<!-- edit.vue -->
<template>
<article-detail :is-edit='true'></article-detail> //edit
</template>
<script>
import ArticleDetail from './components/ArticleDetail'
</script>
~~~
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/layout.html#%E7%A7%BB%E5%8A%A8%E7%AB%AF)移動端
`element-ui`官方對自己的定位是桌面端后臺框架，而且對于管理后臺這種重交互的項目來說是不能通過簡單的適配來滿足桌面端和移動端兩端不同的交互，所以真要做移動版后臺，建議重新做一套系統。
所以本項目也不會適配移動端，只是用`media query`做了一點簡單的響應式布局，有需求請自行修改。
