# 新增页面
如果熟悉`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>`**。
~~~
<!-- 父级路由组件 -->
<template>
<div>
<!-- xxx html 内容 -->
<router-view />
</div>
</template>
~~~
如：[@/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>
~~~
[在 GitHub 上编辑此页](https://github.com/PanJiaChen/vue-element-admin-site/edit/master/docs/zh/guide/essentials/new-page.md)
