布局

    对应代码

    是 webpack 的 alias 不懂得请自行研究

    vue-element-admin 中大部分页面都是基于这个 layout 的，除了个别页面如： login , 404, 401 等页面没有使用该。如果你想在一个项目中有多种不同的layout也是很方便的，只要在一级路由那里选择不同的layout组件就行。

    这里使用了 vue-router , 所以一般情况下，你增加或者修改页面只会影响 app-main这个主体区域。其它配置在 layout 中的内容如：侧边栏或者导航栏都是不会随着你主体页面变化而变化的。

    对应代码

    @/views/layout/components/AppMain

    这里在 外部包了一层 keep-alive 主要是为了缓存 <router-view> 的，配合页面的 tabs-view 标签导航使用，如不需要可自行。

    其中transition 定义了页面之间切换动画，可以根据自己的需求，自行修改转场动画。

    Different router the same component vue。 真实的业务场景中，这种情况很多。比如

    布局 - 图1

    TIP

    或者 可以像本项目中 editForm 和 声明两个不同的 view 但引入同一个 component。

    示例代码：@/views/form

    element-ui 官方对自己的定位是桌面端后台框架，而且对于管理后台这种重交互的项目来说是不能通过简单的适配来满足桌面端和移动端两端不同的交互，所以真要做移动版后台，建议重新做一套系统。

    所以本项目也不会适配移动端，只是做了一点简单的响应式配置，有需求请自行修改。

    原文: