vue中query和params的区别及ant design of vue 中下拉框menu的样式修改方法

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

前言

总结一下vue中路由跳转的两种传参方式的区别，以及各自的优缺点，加深印象，方便以后的使用

vue中路由跳转传参可以使用query和params，两者的区别在于

• query参数跳转的时候可以用path:路径的方法加上query参数;也可是使用name:路由名字加上query参数

    this.$router.push({path:'/dologin',query:{name:'lalei'}})
    this.$router.push({name:'login',query:{name:'lalei'}})

• params参数跳转只能使用name:路由名字加上params参数

    this.$router.push({name:'login',params:{name:'lalei'}})

• query参数和params参数在刷新的时候都会消失（query不是消失了，是如果参数是数组或者对象会变成[object,object]），如果不想消失的话就要做不同的处理

    //query,通过JSON.stringify转换为字符串(如果参数是基本数据类型就不用这样处理，刷新页面也不会消失)
    this.$router.push({path:'/dologin',query:{name:JSON.stringify('lalet')}})
    //取值的时候
    let name = this.$route.query.name
    this.name = JSON.parse(name)
    
    
    //params,在router.js中修改
    
    routes:[
        {
            path:'/dologin/:name',
            name:'login'
        }
    ]

ant design of vue 中的select修改下拉框的颜色

.drop-down-Style {
  .ant-select-dropdown-menu {
    background-color: #05232e !important;
    background: #05232e !important;
  }
  .ant-select-dropdown-menu-item {
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #bedeed;
  }
  .ant-select-dropdown-menu-item-active:not(.ant-select-dropdown-menu-item-disabled) {
    background: #0e313e;
  }
  .ant-select-dropdown-menu-item:hover {
    background: #0e313e;
  }
  .ant-select-dropdown-menu-item:active {
    background: #0e313e;
  }
  .ant-select-dropdown-menu-item-selected {
    background: #0e313e;
    color: #00ddeb;
  }
}

项目中用到ant design of vue中的select，想要上图所示样式，修改了很久都改不了，包括但不限于/deep/,>>>dep等各种方法，最后发现只有在全局修改样式才能更改select的样式，造成这一的原因是因为，select的dropdown在全局，和app同级，如下图

因此在vue文件中修改样式是不生效的（因为vue单个文件的样式都加了scoped），必须再全局修改，但全局修改就会影响别的页面的样式，最后发现ant design of vue提供了一种定义一个类名的方法，就如开头的两个图所示

总结

果然大家常说的一句话是很有道理的，那就是看文档！！！，遇到问题一定要先看文档，好好的看文档！！！