element-ui 路由导航 NavMenu 动态渲染

文件目录结构

router配置  (根据一级目录分不同的文件夹----然后引入router.js----index,js文件yi

import Vue from "vue";
import VueRouter from "vue-router";
import Login from "views/login/Index.vue";
import Layout from "views/layout/Index.vue";
// 目录路由地址
import finance from "./finance/finance";
import product from "./product/product";
import business from "./business/business";
const routes = [
  {
    path: "/",
    component: Login,
    hidden: true, //true为隐藏
  },
  {
    path: "/Layout",
    name: "Layout",
    component: Layout,
    hidden: false,
    children: [
      // 多级嵌套路由尝试
      {
        path: "/home",
        name: "Home",
        component: () => import("views/home/home.vue"),
        meta: {
          title: "首页",
          icon: "el-icon-phone",
        },
      },
      ...product,
      ...finance,
      ...business,
    ],
  },
];

Vue.use(VueRouter);

const router = new VueRouter({
  routes,
});

export default router;

router（三个文件目录的路由信息）

 //文件夹finance---一级路由配置

export default [
  {
    path: "/finance",
    name: "finance",
    meta: { title: "财务管理", icon: "el-icon-location" },
    component: () => import("views/finance/index.vue"),
  },
];


 //文件夹product---有二级路由配置


export default [
  {
    path: "/product",
    name: "product",
    hidden: false,
    meta: {
      title: "产品",
      icon: "el-icon-goods",
    },
    // redirect: "/product/list",
    component: () => import("views/product/index.vue"),
    children: [
      {
        path: "/product/list",
        name: "list",
        component: () => import("views/product/list/index.vue"),
        meta: {
          title: "产品分类",
          icon: "el-icon-goods",
        },
      },
      {
        path: "/product/category",
        name: "category",
        meta: { title: "产品数据", icon: "el-icon-goods" },
        component: () => import("views/product/category/index.vue"),
      },
    ],
  },
];

//文件夹business---有三级路由配置

export default [
  {
    path: "/business",
    name: "business",
    hidden: false,
    meta: {
      title: "业务",
      icon: "el-icon-goods",
    },
    // redirect: "/business/list",
    component: () => import("views/business/index.vue"),
    children: [
      {
        path: "/business/one",
        name: "one",
        meta: {
          title: "业务1",
          icon: "el-icon-goods",
        },
        component: () => import("views/business/one/index.vue"),

        children: [
          {
            path: "/business/one/one1",
            name: "one1",
            meta: { title: "业务1-1", icon: "el-icon-goods" },
            component: () => import("views/business/one/one1.vue"),
          },
        ],
      },
      {
        path: "/business/two",
        name: "two",
        meta: { title: "业务2", icon: "el-icon-goods" },
        component: () => import("views/business/two/index.vue"),
      },
    ],
  },
];