vue在前后端交互中格式化路由的两种方式

cairostar2025-03-19 10:23

看到一些数据交互案例中，对于权限路由后端返回一个带pid的一维路由数组,pid代表父级id,这个数组要前端格式化成树形结构路由。

此方式稍显麻烦的原因是不知道前端是不需要这个pid的，也就是本文中的第二种方式，可以把有权限访问的路由name直接发给前端。vue端建有一个完整路由表，根据name数组就可过滤出一个可访问的路由结构，而不必指定父级是谁。

一、先实现带pid的路由数组的格式化方法：

把后台数据格式化成树：

js 复制代码

let formatTree = (data) => {   //data是后端路由的数据
    let ps = data.filter(d => d.pid == 0)
    const cs = data.filter(d => d.pid != 0)
    let format = (ps) => {
      ps.forEach(p => {
        cs.forEach(c => {
          if (p.id == c.pid) {
            if (p.children) p.children.push(c)
            else p.children = [c]
          }
        })
        p.children && format(p.children)
      })
      return ps
    }
    return format(ps)
  }

树形结构格式化路由:

js 复制代码

formatRoutes(data) {   //data是上边的树形结构数据
      let routes = [];
      data.length &&
        data.forEach(route => {
          let r = {          //格式化成需要的结构
            name: route.title,   
            component: route.component,
          };
          if (route.children) {
            r.child = this.formatRoutes(route.children);  
          }
          routes.push(r);
        });
      return routes;
    }

二、直接发给前端可访问路由name的情况：

不用担心只给子路由name而无法得到父级，都是递归的应用。

js 复制代码

function selectArrayByNames(arr,names) {  //arr是vue完整路由表,names是后端给的路由name集合
	let _arr = [];
	arr.forEach((r) => {
		if (names.indexOf(r.name) != -1) {   
			_arr.push(r);
			return   //不必判断有没有children了，匹配names的路由都是最底层的路由。
		}
		if (r.children) {
			r.children = this.selectArrayByNames(r.children,names);
			if (r.children.length > 0) _arr.push(r);
		}
	});
	return _arr
}