美文网首页
基于element-ui 面包屑和侧边栏与路径绑定

基于element-ui 面包屑和侧边栏与路径绑定

作者: Wermdany | 来源:发表于2019-11-04 16:28 被阅读0次

    在最近的项目中,思考如何把面包屑导航和侧边栏与页面路径绑定到一起。中间走过很多弯路,现在已经找到了比较好的解决方案。

    环境

    1. element-ui;
    2. Vue;
    3. Vue Router;

    想法 1.0

    使用index路由跳转。
    根据对侧边栏的点击,使用方法(selectopen)去全局缓存当前激活的菜单(default-active)和展开的数组(default-openeds)的数据,并保存到localStorage
    通过参考我的一篇文章:
    一些Vue缓存处理
    对数据进行缓存和进入页面获取。
    发现element-uiSubMenu的index也会进行隐式的数据更新(虽然不会造成路由跳转但是面包屑的数据是根据indexPath展示的,会出现多拼接 SubMenu的index情况),造成体验上的不友好,于是废弃。

    想法 2.0

    根据当前的页面路由路径去获取数据,对当前的面包屑和侧边栏进行配置。
    注意区分$router$route这两个对象。
    $router是方法

    $route是属性
    在侧边栏组件中对Menu Attribute添加

     :default-active="this.$route.path"
    

    还好,element-ui 会默认的把选择的菜单组展开,省去了对菜单展开的配置。
    在面包屑中

    <template>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="item in routerArr" :key="item.id">{{CN[item]}}</el-breadcrumb-item>
        </el-breadcrumb>
    </template>
    <script>
    export default {
      computed: {
        routerArr() {
          return this.$route.path.substr(1).split("/");
        }
      }
    }
    </script>
    

    要实现这个效果你必须对递归组件的index进行严格配置。
    格式大概是这样的:

     {
        self: { index: "/index", icon: "el-icon-odometer", title: "首页" },
        child: []
      },
      {
        self: {
          index: "authority",
          icon: "el-icon-s-tools",
          title: "权限管理"
        },
        child: [
          {
            self: {
              index: "/authority/shop",
              icon: "",
              title: "公司管理"
            },
            child: []
          },
          {
            self: {
              index: "/authority/shopgroup",
              icon: "",
              title: "部门管理"
            },
            child: []
          },
          {
            self: {
              index: "/authority/user",
              icon: "",
              title: "用户管理"
            },
            child: []
          },
          {
            self: {
              index: "/authority/role",
              icon: "",
              title: "角色管理"
            },
            child: []
          }
        ]
      },
    

    有时候我们需要设置的层级,没必要使用嵌套路由,可以使用别名来进行配置。

    path: "/",
        component: () => import("@/views/Main"),
        children: [
          {
            path: "index",
            name: "index",
            component: () => import("@/views/Index"),
            meta: {}
          },
          {
            path: "shop",
            name: "shop",
            alias: "/authority/shop",
            component: () => import("@/views/Authority/Shop")
          },
          {
            path: "shopgroup",
            name: "shopgroup",
            alias: "/authority/shopgroup",
            component: () => import("@/views/Authority/ShopGroup")
          },
          {
            path: "role",
            name: "role",
            alias: "/authority/role",
            component: () => import("@/views/Authority/Role")
          },
          {
            path: "user",
            name: "user",
            alias: "/authority/user",
            component: () => import("@/views/Authority/User")
          },
        ]
    }
    

    这样可以根据路径进行导航和侧边栏联动了。

    有一个坏处就是到达一个页面会有两个路径,不过这也不是什么大问题。

    相关文章

      网友评论

          本文标题:基于element-ui 面包屑和侧边栏与路径绑定

          本文链接:https://www.haomeiwen.com/subject/fiedbctx.html