vue路由的复习

vue路由中基本的组件：

• path:路径匹配符，当匹配到对应的路径，就跳转到相应的页面。
• component:相当于是跳转到的路径，有两种调用方式。
  • 第一种是和引入组件一样，将组件引入到router的js文件中，然后进行调用
  • 第二种是component:()=>import(‘ 跳转页面文件所在路径’)
• children:存放子路由的相关信息，如果子路由中path指定为空，则在一级路由中可以直接看到二级路由的相关内容。

-meta:路由元信息，说白了就是路由中存储信息的地方，可以存储任何信息。

vue组件的补充

• vue组件中functional属性为true表示该组件为一个函数式组件
  • 函数式组件： 没有data状态，没有响应式数据，只会接收props属性，没有this，他就是一个函数，依靠render函数返回一个结构体。再页面中显示这个结构体。

element-ui中slot-scope的使用

slot-scope='name' 这里的name是自定义的名称，用来获取组件中传递过来的数据。

slot-scope='{data}'这个是解构的插槽

利用递归将数组变成树形结构

基本思路：首先我们要了解树形结构就是一层对象中间用children嵌套一层对象。

• 所以我们首先要观察后台返回过来的数据，哪个属性标志分层，经过观察我们发现最底层的pid为空，而他们的子级的pid等于父级的id，由此我们遍历数组，如果数组的pid为空，那么他们就是底层数据，那么就继续查找pid等于他们id的值（他们的子级），以此类推，当然我们不能把空值写死，如果写死的话，判断下一级就又得写一个函数，所以我们可以在函数中再添加一个形参，用于表示空值，而添加数据到数组的思路是，在外层函数用来push底层数据，在内部函数我们用来声明一个chidren属性，将查找到的子级存储到里面，然后添加到数组中。

function tranListToTreeData(list,rootValue){ 
    var arr = [] //创建一个新的数组，用于存储改变格式后的数组
    
    //list是传递进来的所有数据，数据类型为数组
    //rootValue用来指定一个空值，当判断完底层后，将底层数据的id当作形参传过去
    //我们要遍历这个数组，找出底层元素
    list.forEach(item=>{
        if(item.pid === rootValue){
            const children = tranListToTreeData(list,rootValue)
            if(children.length){
                //如果找到子节点，将children添加至数组中
                item.children=children
            }
            arr.push(item)
        }
    })
    return arr
}
复制代码