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

最新推荐文章于 2024-09-27 16:12:29 发布

满舰饰v

最新推荐文章于 2024-09-27 16:12:29 发布

阅读量3.9k

点赞数 8

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_40893035/article/details/114314544

版权

前端专栏收录该内容

27 篇文章 1 订阅

订阅专栏

大致效果是这样的
项目地址

在这里插入图片描述

1 . 创建layout文件并布局

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

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

<transition mode="out-in">
	<router-view></router-view>
</transition>

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")
        }
      ]
    },