《vue3从零搭建一个后台》(七)、主页面(main)的配置

主页这里显示不是很好，可以优化一下

src/layout/compoents/Sidebar.vue 加入 主页连接的判断
这里只是简单的优化一下。根据redirect 属性识别是否为单级菜单
redirect本来是用于重定向的。但是重定向后，存在菜单激活颜色问题，
激活的是/home, 而不是/，这里暂时没有去适配。
路由的处理应该在 src/store/modules/router.js 进行加工。

        <div v-for="(item, i) in routers" :key="i">
            <el-submenu v-if="item.children && !item.redirect" :index="item.path" class="hide-tile">
              <template #title>
                <i class="el-icon-sunny" />
                <span>{{ item.meta.title }}</span>
              </template>
              <el-menu-item v-for="(children, index) in item.children" :key="index" :index="item.path + '/' +children.path">{{ children.meta.title }}</el-menu-item>
            </el-submenu>
            <el-menu-item v-else :index="item.redirect ? item.redirect : item.path">
              <i class="el-icon-menu" />
              <template #title>{{ item.meta.title }}</template>
            </el-menu-item>
          </div>

src/layout/compoents/Navbar.vue 加入主页判断

    getBreadcrumb() {
      // 获取路由对应title   && 存在返回右边，不存在返回左边
      const matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
      if (this.levelList[0].path === '/') this.levelList = [this.levelList[0]]
    }

最终结果：

开启了缓存的页面切换不会进行重新加载

主页面的配置结束。已经可以进行后台业务的开发了。

接下来将配置：路径拦截（路由守卫），登录页面、以及权限。图标库的制作。有时间我再更新。

文章均来自互联网如有不妥请联系作者删除QQ:314111741 地址：http://www.mqs.net/post/14817.html