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

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

环境

element-ui；
Vue；
Vue Router；

想法 1.0

使用index路由跳转。
根据对侧边栏的点击，使用方法（select和open）去全局缓存当前激活的菜单(default-active)和展开的数组(default-openeds)的数据，并保存到localStorage
通过参考我的一篇文章：
一些Vue缓存处理
对数据进行缓存和进入页面获取。
发现element-ui中 SubMenu的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")
      },
    ]
}

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

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

最后编辑于：2019.11.04 18:02:40