vue 后台管理系统（1）路由配置

vue 后台管理系统（1）路由篇

vue-router 结构一致的配置

import Vue from 'vue';
import Router from 'vue-router';
import Layout from './index.vue';

Vue.use(Router);

/**
 * 这种配置方式有以下弊端
 * 1. product 命名空间重复写多次 代码臃肿
 * 2. 导航的链式关系需要额外的代码逻辑指定(preNav), 比如 商品管理 > 商品列表 > 商品详情 > 商品编辑
 *    您可能会想到路由链式关系可以通过路由段来匹配：/goods/product/:id/edit 一个路由段对应一个路由
 *    => (1) /goods (2) /goods/product (3) /goods/product/:id (4) /goods/product/:id/edit
 *    这样做比较麻烦，而且也没有相关API支持

 * 3. 从 $route.matched 获取当前匹配的路径是行不通的，比如访问 /goods/product/1/edit 只匹配到了两个
     (1) /goods
     (2) /goods/product/1/edit
 *  
 */
export const routes = [
  {
    name: 'M1',
    component: Layout,
    path: '/goods',
    redirect: '/goods/product',
    meta: {
      title: '商品管理'
    },
    children: [
      {
        name: 'M2',
        component: () => import('../Product.vue'),
        path: 'product',
        meta: {
          title: '商品列表',
          activeMenu: 'M2'
        }
      },
      {
        name: 'M3',
        component: () => import('../Product.vue'),
        path: 'product/add',
        meta: {
          title: '增加商品',
          activeMenu: 'M2'
        }
      },
      {
        name: 'M4',
        component: () => import('../Product.vue'),
        path: 'product/:id',
        meta: {
          title: '商品详情',
          activeMenu: 'M2'
        }
      },
      {
        name: 'M5',
        component: () => import('../Product.vue'),
        path: 'product/:id/edit',
        meta: {
          title: '编辑商品',
          activeMenu: 'M2',
          preNav: 'M4'
        }
      }
    ]
  }
];

export default new Router({
  routes: routes
});

自动注入

页面文件目录按照某种规格编写，读取文件目录生成路由，与 nuxt 类似，约束性太强，而且目录看起来总觉得很奇怪，故不采用。

自定义结构

路由结构层次清晰，能满足菜单/导航/权限 等配置。

import Vue from 'vue';
import Router from 'vue-router';
import Layout from './index.vue';

Vue.use(Router);

/**
 * routes 包含了导航链式关系 以及 菜单关系
 */
export const routes = [
  {
    name: 'M1',
    component: Layout,
    path: '/product',
    redirect: '/product/index',
    meta: {
      title: '商品管理'
    },
    children: [
      {
        name: 'M2',
        component: () => import('../Product.vue'),
        path: 'index',
        meta: {
          title: '商品列表'
        }
      },
      {
        name: 'M3',
        component: () => import('../Brand.vue'),
        path: 'brand',
        meta: {
          title: '品牌管理'
        }
      },
      {
        name: 'M4',
        component: () => import('../Category.vue'),
        path: 'category',
        meta: {
          title: '类目管理'
        }
      }
    ]
  },
  {
    name: 'M5',
    component: Layout,
    path: '/order',
    redirect: '/order/index',
    meta: {
      title: '订单管理'
    },
    children: [
      {
        name: 'M6',
        component: () => import('../OrderList.vue'),
        path: 'index',
        meta: {
          title: '订单列表'
        },
        children: [
          {
            name: 'M7',
            component: () => import('../OrderDetail.vue'),
            path: 'add',
            hidden: true,
            meta: {
              title: '创建订单'
            }
          },
          {
            name: 'M8',
            component: () => import('../OrderDetail.vue'),
            path: ':orderId',
            hidden: true,
            meta: {
              title: '订单详情'
            },
            children: [
              {
                name: 'M9',
                component: () => import('../OrderDetail.vue'),
                path: 'edit',
                meta: {
                  title: '编辑订单'
                }
              }
            ]
          }
        ]
      }
    ]
  }
];

/**
 * 生成 vue-router routes
 */
const makeRoutes = () => {
  const rList = [];

  const rawChildren = (parent, children = [], top) => {
    children.forEach(item => {
      item.path = (parent.path + '/' + item.path).replace('//', '/');
      const child = {
        ...item
      };
      delete child.children;
      top.children.push(child);
      rawChildren(item, item.children, top);
    });
  };

  routes.forEach(item => {
    const child = {
      ...item,
      children: []
    };
    rawChildren(child, item.children || [], child);
    rList.push(child);
  });

  return rList;
};

export default new Router({
  routes: makeRoutes()
});

左侧菜单配置：

<template>
  <el-menu
    class="menu"
    :default-active="activeMenu"
    background-color="#282c43"
    text-color="#fff"
    active-text-color="#fc652f"
  >
    <MenuItem v-for="item in routes" :menu="item" :key="item.name" :routes="routes" />
  </el-menu>
</template>

<script>
// sidebar.vue
import { routes } from '../router';
import MenuItem from './menu-item';

export default {
  components: {
    MenuItem
  },
  data() {
    return {
      routes,
      isCollapse: true
    };
  },
  computed: {
    activeMenu() {
      const meta = this.$route.meta;
      return meta && meta.menuValue ? meta.menuValue : this.$route.name;
    }
  }
};
</script>

<style scoped>
.menu {
  border-right: 0;
}
.menu-item {
  padding: 0 12px;
  line-height: 40px;
}
</style>

<template>
  <div v-if="menu.meta && !menu.hidden">
    <template v-if="!hasChildren(menu)" >
      <el-menu-item>
        <template slot="title">
          <span slot="title">{{ menu.meta.title }}</span>
        </template>
      </el-menu-item>
    </template>

    <template v-else>
      <el-submenu :index="getMenuIndex(menu)">
        <template slot="title">
          <i class="el-icon-user-solid" v-if="showIcon"></i>
          <span slot="title">{{ menu.meta.title }}</span>
        </template>
        <child-menu
          v-for="child in menu.children"
          :key="child.name"
          :menu="child"
          :show-icon="false"
        />
      </el-submenu>
    </template>
  </div>
</template>

<script>
// menu-item.vue
import router from '../router';

export default {
  name: 'child-menu',
  props: {
    menu: {
      type: Object,
      default: null
    },
    'show-icon': {
      type: Boolean,
      default: true
    }
  },

  created() {
    this.$watch('menu', v => {
      console.log(v);
    });
  },

  methods: {
    getMenuIndex($route) {
      return $route.name;
    },

    hasChildren(menu) {
      if (!menu.children) return false;
      return !!menu.children.filter(menu => !menu.hidden).length;
    },

    gotoPath(route) {
      if (route.name !== this.$route.name) {
        this.$router.push({ name: route.name });
      }
    },

    hasPermission(route) {
      return true;
    }
  }
};
</script>

<style scoped>
.menu {
  border-right: 0;
}

.menu-item {
  padding: 0 12px;
  line-height: 40px;
}
</style>

导航面包屑：

<template>
  <div>
    <span v-for="bread in breadList" :key="bread.name">
      {{ bread.meta.title }}
    </span>
  </div>
</template>

<script>
import { routes } from './router';

export default {
  data() {
    return {
      routes,
      breadList: []
    };
  },
  created() {
    let res = null;
    const find = (list, path) => {
      list.forEach(item => {
        const curPath = [...path].concat(item);
        if (item.name === this.$route.name) {
          res = curPath;
        }
        item.children && find(item.children, curPath);
      });
    };

    find(routes, []);
    this.breadList = res;
  }
};
</script>