0
点赞
收藏
分享

微信扫一扫

黑马头条-路由和页面

书坊尚 2022-03-26 阅读 60
前端

动态路由,当有多个子路由时,写在实例中,为以后的修改不方便,我们就用动态路由,方便,易操作

没个页面路由的js页面中

import Layout from "@/layout";

//  {  path: '', component: '' }

// 每个子模块 其实 都是外层是layout  组件位于layout的二级路由里面

export default {
  path: "/approvals", // 路径

  name: "approvals", // 给路由规则加一个name

  component: Layout, // 组件

  // 配置二级路的路由表

  children: [

    {
      path: "", // 这里当二级路由的path什么都不写的时候 表示该路由为当前二级路由的默认路由

      component: () => import("@/views/approvals"),

      // 路由元信息  其实就是存储数据的对象 我们可以在这里放置一些信息

      meta: {
        title: "审批",

        icon: "example", // meta属性的里面的属性 随意定义 但是这里为什么要用title呢, 因为左侧导航会读取我们的路由里的meta里面的title作为显示菜单名称

      },

    },

  ],

};

meta:是路由的标题,图标

之后再,index.js中引入路由文件.

import approvalsRouter from "./modules/approvals";

export const asyncRoutes = [approvalsRouter]

由于文件过多,一个个写麻烦,我们就解构进去

const createRouter = () =>

  new Router({
    // mode: 'history', // require service support

    scrollBehavior: () => ({ y: 0 }),

    routes: [...constantRoutes, ...asyncRoutes],

  });

树状控件,element-ui中的控件.我们做出引用

/** *

 *

 *  将列表型的数据转化成树形数据 => 递归算法 => 自身调用自身 => 一定条件不能一样, 否则就会死循环

 *  遍历树形 有一个重点 要先找一个头儿

 * ***/

export function tranListToTreeData(list, pid) {
  var arr = [];

  list.forEach((item) => {
    if (item.pid === pid) {
      // 找到之后 就要去找 item 下面有没有子节点

      const children = tranListToTreeData(list, item.id);

      if (children.length > 0) {
        // 如果children的长度大于0 说明找到了子节点

        item.children = children;

      }

      arr.push(item); // 将内容加入到数组中

    }

  });

  return arr;

}

   async getDepartments() {
      const result = await getDepartments();

      // console.log(result);

      this.company = { name: result.companyName, manager: "负责人" }; // 这里定义一个空串  因为 它是根 所有的子节点的数据pid 都是 ""

      this.data = tranListToTreeData(result.depts, "");

      this.data = data;

      console.log(data);

    },

  },
 

举报

相关推荐

0 条评论