vue + element-ui 实现后台管理大体layout 布局

ゝ一纸荒年。 2022-11-05 00:45 483阅读 0赞

**大致效果是这样的**  
[项目地址][Link 1]

![在这里插入图片描述][20210303144858439.gif_pic_center]

## 1 . 创建layout文件并布局 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center]  
这里使用的是`element-ui`提供的布局，经典的`header`，`aside`，`main`形式布局（具体要什么样的自己设置，这里例举其中一种形式）

**这里最重要的是，在`el-main`，放一个`router-view`**  
**`router-view`的作用是，嵌套路由下面的嵌套组件，渲染到该位置**  
**同样的`App.vue`中的`router-view`，是在根节点下，所以路由里的所有内容都会渲染在这里**

## 2 . 设置嵌套路由 ##

**layout布局文件写完之后，就可以开始设置路由了**

以其中一部分路由为例

第一级必须是`layout`组件，使用`children`属性，设置其嵌套内容，然后设置点击事件`this.$router.push(name)`，跳转到对应页面，路由嵌套是可以嵌套很多层的，如下代码

**路由的`path`属性如果不加`/`就会继承其父级的地址，往后进行拼接**

// 侧边栏 导航一 路由地址
        { 
          path: "/",
          name: "Layout",
          component: Layout,
          // 三个 子路由 路由地址
          children: [
            { 
              path: "navigationOne-optionOne",
              name: "navigationOne-optionOne",
              component: () => import("@/pages/navigationOne/optionOne")
            },
            { 
              path: "navigationOne-optionTwo",
              name: "navigationOne-optionTwo",
              component: () => import("@/pages/navigationOne/optionTwo"),
              // 子路由 中的 子路由地址
              children: [
                { 
                  path: "optionTwo-1",
                  name: "optionTwo-1",
                  component: () =>
                    import("@/pages/navigationOne/optionTwoChildren/childOne")
                },
                { 
                  path: "optionTwo-2",
                  name: "optionTwo-2",
                  component: () =>
                    import("@/pages/navigationOne/optionTwoChildren/childTwo")
                },
                { 
                  path: "optionTwo-3",
                  name: "optionTwo-3",
                  component: () =>
                    import("@/pages/navigationOne/optionTwoChildren/childThree")
                }
              ]
            },
            { 
              path: "navigationOne-optionThree",
              name: "navigationOne-optionThree",
              component: () => import("@/pages/navigationOne/optionThree")
            }
          ]
        },

[Link 1]: https://gitee.com/chenminghuisir/vue-el-ui-layout.git
[20210303144858439.gif_pic_center]: /images/20221023/06ef38328ef241d38e57fa8bcf10fc57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwODkzMDM1_size_16_color_FFFFFF_t_70_pic_center]: /images/20221023/72aa96084a1845399a3c0e4a3cee6fbd.png