Make writing a habit together! This is my first day to participate in the “Gold Digging Day New Plan · April More text challenge”, click to see the details of the activity.

preface

Summarize the differences between the two parameter transmission modes of route jump in VUE, as well as their advantages and disadvantages, to deepen the impression and facilitate future use

In Vue, you can use query and params to route forward parameters

  • The query parameter can be jumped using the path: path method and the query parameter. You can also use name: the route name with a query parameter
    this.$router.push({path:'/dologin'.query: {name:'lalei'}})
    this.$router.push({name:'login'.query: {name:'lalei'}})
Copy the code
  • Params parameter jumps can only use name: route name plus params parameter
    this.$router.push({name:'login'.params: {name:'lalei'}})
Copy the code
  • Both query and params arguments disappear on refresh, and you have to do something different if you don’t want them to disappear
    //query, converted to a string via json.stringify (this is not the case if the parameter is a basic data type and the page refresh does not disappear)
    this.$router.push({path:'/dologin'.query: {name:JSON.stringify('lalet')}})
    // When the value is specified
    let name = this.$route.query.name
    this.name = JSON.parse(name)
    
    
    //params, modified in router.js
    
    routes:[
        {
            path:'/dologin/:name'.name:'login'}]Copy the code

Select in Ant Design of Vue changes the color of the drop-down box

.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; }}Copy the code

/deep/,>>>dep, etc., and finally found that the select style can only be changed globally. The reason for this is that, Select dropdown globally, the same as app dropdown

So changing styles in vue files doesn’t work (because the styles in vue single files are scoped) and must be changed globally, but global changes will affect the styles of other pages. Finally, Ant Design of Vue provides a way to define a class name, as shown in the first two figures

conclusion

Sure enough we often say a word is very reasonable, that is to see the document!! , encountered problems must first look at the document, a good look at the document!!