22年1月工作笔记整理（前端）

1月份开始又轻松了许多，为了年前可以上线按照优先级把需求重新分配了一下，也省略了一些比较复杂又没啥用的交互。后面又感冒了一周，又是年会总结会啥的，除了修修bug也没什么心思工作了。

一、路由跳转后页面刷新参数消失问题

这个问题一直以为是框架的问题，后面有位同事提出一种最简单的方式解决，但是参数会在浏览器地址上显示，不安全。
路由传参的三种方式：
1.使用path带参数跳转,页面刷新数据不会丢失

//跳转
     this.$router.push({
          path: `/particulars/${id}`,
        })
 //路由的配置
 {
     path: '/particulars/:id',
     name: 'particulars',
     component: particulars
   }
   //跳转后的页面获取参数
   this.$route.params.id

2.通过name跳转，通过params传参，页面刷新数据会丢失

//跳转
 this.$router.push({
          name: 'particulars',
          params: {
            id: id
          }
        })
//路由的配置
 {
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }
 //跳转后的页面获取参数
 this.$route.params.id

3.通过path跳转，通过query传参，页面刷新数据不丢失，但是会在浏览器地址出现参数，也是我同事提出的方式解决刷新数据没有的bug

//跳转
this.$router.push({
          path: '/particulars',
          query: {
            id: id
          }
   })
 //路由配置
 {
     path: '/particulars',
     name: 'particulars',
     component: particulars
   }
 //跳转后的页面获取参数
  this.$route.query.id

二、文件传给后端的数据处理

var formdata=new FormData();
 formdata.append ("name" , "张三");

如果key值一样，value值不一样，就会再新加一个进去，如果文件有多个，可以通过循环调用append方法。
这个formdata就可以直接传给后端了
关于文件上传还有个坑
分自动上传和手动上传
自动上传：调用方法 before-upload，里面的file是二进制流，就是直接拿
手动上传：调用方法on-change，里面的file是对象，要获取要 .raw
获取文件数组：this.$ref.名字.uploadFiles

三、动态加样式的对象语法

<div :class ="{active:isActive}"></div>
isActive来控制是否用actve样式

四、拦截下拉选择框

因为下拉框组件不带这种方法，只能自己写一个，首先要通过监听，获取新值和老值，老值用来取消的时候又重新赋值的。

 watch: {
    farmType(val, olval) {
      console.log(val, olval, '监听')
      this.olFarmType = olval
    }
  },

如果拦截一个值的变化，但是要全部满足条件才修改，那就拷贝出一个一模一样的值，通过这个值去判断是否能够改变之前的值。相当于改变的是一个值A，实际的显示隐藏是通过另一个值B，直到下拉选择弹出弹窗后点了确定才把A赋值给B

  //改变类型方式
    changeType() {
      console.log('切换触发农事类型', this.farmType)
        this.$confirm(
          '当前页面未保存，是否仍要切换类型？',
          '选择切换确认',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
          .then(async () => {
          //确定了就把A赋值给B
         //重置刷新
          })
          .catch(() => {
        //把老值赋值给之前的A
          })
      }

五、其他小需求

1.配置权限流程
首先在代码上加v-permission:code(配好的功能编码)
再去配好功能编码和权限开通

2.如果表格在渲染的时候表示错乱
在更新的时候以下代码即可：

this.$nextTick(()=>{
     this.$refs.ref的名字.dolayout()
})