若依路由配置教程

  1. 路由配置文件

若依路由配置教程_第1张图片

2. 配置内容介绍

{
    path: "/tool/gen-edit",
    component: Layout,   //在路由下,引用组件的名称,在页面中包括这个组件的内容(页面框架内容)
    hidden: true, //此页面的内容,在左边的菜单中不用显示。
    children: [
      {
        path: "index",   //子路径,拼接在父路径后面的内容(/tool/gen-edit/index)
        component: (resolve) =>
          require(["@/views/tool/gen/editTable"], resolve),
        name: "GenEdit",
        meta: { title: "修改生成配置", activeMenu: "/tool/gen" },
      },
    ],
  },

执行如下代码,将跳转到如下所示的URL的路径

   /** 修改按钮操作 */
    handleEditTable(row) {
      const tableId = row.tableId || this.ids[0];
      this.$router.push({ path: '/tool/gen-edit/index', query: { tableId: tableId, pageNum: this.queryParams.pageNum } });
    },

跳转到此路由如下图所示 

  // tdm
  {
    path: "/tdm",
    hidden: true,
    component: (resolve) => require(["@/views/erp/TDM/index"], resolve),
    redirect: "tdm",
    children: [
      {
        path: "tdm",
        component: (resolve) =>
          require(["@/views/erp/TDM/modules/TdmTwo"], resolve),
        name: "TDM",
        meta: { title: "TDM" },
      },
      {
        path: "tdmThree",
        component: (resolve) =>
          require(["@/views/erp/TDM/modules/TdmThree"], resolve),
        name: "TDMThree",
        meta: { title: "TDM Three" },
      },
      {
        path: "tdmFour",
        component: (resolve) =>
          require(["@/views/erp/TDM/modules/TdmFour"], resolve),
        name: "TDMFour",
        meta: { title: "TDM Four" },
      },
    ],
  },
];

{
    path: "/tool/gen-edit",
    component: Layout,
    hidden: true,
    children: [
      {
        path: "index",
        component: (resolve) =>
          require(["@/views/tool/gen/editTable"], resolve),
        name: "GenEdit",
        meta: { title: "修改生成配置", activeMenu: "/tool/gen" },
      },
    ],
  },

  // 新增模块路由
  {
    path: "/tdm",
    hidden: true,
    component: (resolve) => require(["@/views/erp/TDM/index"], resolve),
    redirect: "tdm",
    children: [
      {
        path: "tdm",
        component: (resolve) =>
          require(["@/views/erp/TDM/modules/TdmTwo"], resolve),
        name: "TDM",
        meta: { title: "TDM" },
      },
      {
        path: "tdmThree",
        component: (resolve) =>
          require(["@/views/erp/TDM/modules/TdmThree"], resolve),
        name: "TDMThree",
        meta: { title: "TDM Three" },
      },
      {
        path: "tdmFour",
        component: (resolve) =>
          require(["@/views/erp/TDM/modules/TdmFour"], resolve),
        name: "TDMFour",
        meta: { title: "TDM Four" },
      },
    ],
  },
];

你可能感兴趣的:(java,前端,服务器)