vue 多级路由

在路由页面内增加页面切换

{
    path: "/",
    name: "home",
    redirect: "/index",
    component: () => import("@/views/Home.vue"),
    // 一级路由页面
    children: [
      {
        path: "index",
        name: "IndexView",
        component: () => import("@/views/Index/Index.vue"),
        props: true,
        meta: {
          name: "IndexView",
          path: "/index",
          title: "首页",
        },
      },
        {
        path: "OAexamine",
        name: "OAexamine",
        redirect: "/OAexamine/apply",
        component: () =>
          import( "@/views/OA/examine/index.vue"),
        meta: {
          name: "OAexamine",
          path: "/OAexamine",
          title: "审批",
        },
        // 一级页面里面的子页面,二级路由
        children: [
          {
            path: "apply",
            name: "apply",
            component: () => import("@/views/OA/examine/apply.vue"),
            meta: {
              name: "apply",
              path: "/OAexamine/apply",
              title: "发起申请",
            },
          },
          {
            path: "examine",
            name: "examine",
            redirect: "/OAexamine/examine/a",
            component: () => import("@/views/OA/examine/examine.vue"),
            meta: {
              name: "examine",
              path: "/OAexamine/examine",
              title: "我审批的",
            },
            // 三级路由
           children: [
          {
            path: "a",
            name: "a",
            component: () => import("@/views/MT/adhibition/examine/examine/a.vue"),
            meta: {
              title: "待处理",
            },
          },
          {
            path: "b",
            name: "b",
            component: () => import("@/views/MT/adhibition/examine/examine/b.vue"),
            meta: {
              title: "已处理",
            },
          },
        {
            path: "c",
            name: "c",
            component: () => import("@/views/MT/adhibition/examine/examine/c.vue"),
            meta: {
              title: "抄送我",
            },
          },
        ]
          },
          {
            path: "submit",
            name: "submit",
            component: () => import("@/views/OA/examine/submit.vue"),
            meta: {
              name: "submit",
              path: "/OAexamine/submit",
              title: "我提交的",
            },
          },
        ],
      },
    ]
}

 <div class="top">
            <router-link active-class="active" to="/OAexamine/apply">发起申请</router-link>
            <router-link active-class="active" to="/OAexamine/examine">我审批的</router-link>
            <router-link active-class="active" to="/OAexamine/submit">我提交的</router-link>
 </div>

二级页面里面的页面切换的路由要加上一级路由

比如到apply页面要加上父级OAexamine 一起才可以

三级页面也加上一级路由 /OAexamine/examine/a

以此类推，路由一般不超过三级，可以实现更多但是层级太多用户体验不好

猜你喜欢