# 新增頁面
如果熟悉`vue-router`的配置就很簡單了。
首先在`@/router/index.js`中增加你需要添加的路由。
**如：新增一個 excel 頁面**
~~~
{
path: '/excel',
component: Layout,
redirect: '/excel/export-excel',
name: 'excel',
meta: {
title: 'excel',
icon: 'excel'
}
}
~~~
> TIP
>
> 僅僅這樣不會有任何效果的，它只是創建了一個基于`layout`的一級路由，你還需要在它下面的`children`中添加子路由。
~~~
{
path: '/excel',
component: Layout,
redirect: '/excel/export-excel',
name: 'excel',
meta: {
title: 'excel',
icon: 'excel'
},
children: [
{
path: 'export-excel',
component: ()=>import('excel/exportExcel'),
name: 'exportExcel',
meta: { title: 'exportExcel' }
}
]
}
~~~
**這樣側邊欄就會出現如圖所示的`menu-item`了**
> ## TIP
>
> 由于`children`下面只聲明了一個路由所以不會有展開箭頭，如果`children`下面的路由個數大于 1 就會有展開箭頭，如下面所示。 如果你想忽視這個自動判斷可以使用`alwaysShow: true`，這樣它就會忽略之前定義的規則，一直顯示根路由。詳情見[路由和側邊欄](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/router-and-nav.html#%E8%B7%AF%E7%94%B1%E5%92%8C%E4%BE%A7%E8%BE%B9%E6%A0%8F)
~~~
{
path: '/excel',
component: Layout,
redirect: '/excel/export-excel',
name: 'excel',
meta: {
title: 'excel',
icon: 'excel'
},
children: [
{ path: 'export-excel', component: ()=>import('excel/exportExcel'), name: 'exportExcel', meta: { title: 'exportExcel' }},
{ path: 'export-selected-excel', component: ()=>import('excel/selectExcel'), name: 'selectExcel', meta: { title: 'selectExcel' }},
{ path: 'upload-excel', component: ()=>import('excel/uploadExcel'), name: 'uploadExcel', meta: { title: 'uploadExcel' }}
]
}
~~~
**側邊欄就會出現如圖所示的`submenu`了**
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/new-page.html#%E5%A4%9A%E7%BA%A7%E7%9B%AE%E5%BD%95-%E5%B5%8C%E5%A5%97%E8%B7%AF%E7%94%B1)多級目錄(嵌套路由)
如果你的路由是多級目錄，如本項目[@/views/nested](https://github.com/PanJiaChen/vue-element-admin/tree/master/src/views/nested)那樣， 有三級路由嵌套的情況下，不要忘記還要手動在二級目錄的根文件下添加一個`<router-view>`。
如：[@/views/nested/menu1/index.vue](https://github.com/PanJiaChen/vue-element-admin/blob/master/src/views/nested/menu1/index.vue)，原則上有多少級路由嵌套就需要多少個`<router-view>`。
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/new-page.html#%E6%96%B0%E5%A2%9E-view)新增 view
新增完路由之后不要忘記在`@/views`文件下 創建對應的文件夾，一般性一個路由對應一個文件，該模塊下的功能組件或者方法就建議在本文件夾下創建一個`utils`或`components`文件夾，各個功能模塊維護自己的`utils`或`components`組件。如：
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/new-page.html#%E6%96%B0%E5%A2%9E-api)新增 api
最后在[@/api](https://github.com/PanJiaChen/vue-element-admin/tree/master/src/api)文件夾下創建本模塊對應的 api 服務。
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/new-page.html#%E6%96%B0%E5%A2%9E%E7%BB%84%E4%BB%B6)新增組件
個人寫 vue 項目的習慣，在全局的`@/components`只會寫一些全局的組件，如富文本，各種搜索組件，封裝的日期組件等等能被公用的組件。每個頁面或者模塊特定的業務組件則會寫在當前 views 下面。如：`@/views/article/components/xxx.vue`。這樣拆分大大減輕了維護成本。
**請記住拆分組件最大的好處不是公用而是可維護性！**
## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/essentials/new-page.html#%E6%96%B0%E5%A2%9E%E6%A0%B7%E5%BC%8F)新增樣式
頁面的樣式和組件是一個道理，全局的`@/style`放置一下全局公用的樣式，每一個頁面的樣式就寫在當前`views`下面，請記住加上`scoped`或者命名空間，避免造成全局的樣式污染。
~~~
<style>
/* global styles */
</style>
<style scoped>
/* local styles */
.xxx-container{
/* name scoped */
xxx
}
</style>
~~~
