vue之this.$route.query和this.$route.params的使用与区别-蒲公英云

vue之this.$route.query和this.$route.params的使用与区别

Bertha 。 2023-06-20 13:59 62阅读 0赞

一、this.$route.query的使用  
1、router/index.js    
{        
    path:'/mtindex',        
    component: mtindex,        //添加路由        
    children:[         
     {              
        path:':shopid',              
        component:guessdetail         
     }        
    ]           
 },
2、传参数
this.$router.push({
      path: '/mtindex/detail', query:{shopid: item.id}
        });
3、获取参数
this.$route.query.shopid
4、url的表现形式(url中带有参数)
http://localhost:8080/#/mtindex/detail?shopid=1
二、this.$route.params
1、router/index.js
{        
    path:'/mtindex',        
    component: mtindex,        //添加路由        
    children:[          
    {              
        path:"/detail",              
        name:'detail',              
        component:guessdetail          
    }        
    ]            
},
2、传参数（ params相对应的是name  query相对应的是path）
this.$router.push({
      name: 'detail', params:{shopid: item.id}
        });
3、获取参数
this.$route.params.shopid
4、url的表现形式(url中没带参数)
http://localhost:8080/#/mtindex

例子：

routes: [
  // 写法 (1)
  { //在路由中显示传递的参数   
    path: '/skipIn/:name/:age', //传递两个参数
    name: 'SkipIn',    //跳转页面的名字
    component: SkipIn  //注册组件
  },
  // 写法 (2)
  // { 
  //   path: '/skipIn',
  //   name: 'SkipIn',
  //   component: SkipIn
  // }
]

跳转之前的页面

<template>
  <div id="skip">
    <div class="Input">
      <el-form ref="form" :model="form" label-width="80px">
        <el-row :gutter="20">
            <el-col :span="6">
            <el-form-item label="姓名:">
              <el-input v-model="form.name" size="small"></el-input>
            </el-form-item>
            </el-col>
              <el-col :span="6">
              <el-form-item label="年龄:">
                <el-input v-model="form.age" size="small"></el-input>
              </el-form-item>
              </el-col>
            </el-row>
       </el-form>
     </div>
     <div class="footer">
        <el-button type="primary" size="small" class="skipBtn" @click="skipBtn">路由跳转</el-button>
     </div>
  </div>
</template>
<script>
  export default{
    name:'RouterSkip',
    data(){
      return{
        form:{
          name: "",
          age: ""
        }
      }
    },
    methods:{
      skipBtn: function(){
          // 写法 1.如果以这种方式传递参数，那么路由的写法要以(1)为准。
          // url的表现形式为(url中带参数)：http://localhost:8080/#/skipIn/小明/20
        this.$router.push({ path: "/skipIn/" + this.form.name + "/" + this.form.age});
        // 写法 2. 如果以这种方式传递参数，那么路由的写法要以(2)就可以了。
        // url的表现形式为(url中不带参数)：http://localhost:8080/#/skipIn
        this.$router.push({ name: 'SkipIn', params:{name: this.form.name, age:this.form.age}});
        // 注：如果以2这种方式传递参数时，那么当刷新跳转后传参的页面，数据将不存在。
        // 写法 3. 如果以这种方式传递参数，那么路由的写法要以(2)就可以了。
        // url的表现形式为(url中带参数)：http://localhost:8080/#/skipIn?name=小明&age=20
        this.$router.push({ path: "/skipIn", query: {name: this.form.name, age:this.form.age}});
        // 注：如果以1、3这种方式传递参数时，刷新跳转后传参的页面，数据还会显示存在。
      }
    },
  }
</script>
<style lang="scss" scoped>
  #skip{
    width: 100%;
    height: 400px;
    background: #eee;
    .Input{
      padding: 10px 20px;
    }
    .footer{
      width: 100%;
      background: #ccc;
      padding: 5px 20px;
      overflow: hidden;
      .skipBtn{
        float: right;
      }
    }
  }
</style>

跳转之后的页面

<template>
  <div id="skipIn">
    <div class="header">
      <span class="info">{
   {msg}}</span>
      <el-button type="primary" size="small" class="backBtn" @click="back">
        返回<i class="iconfont icon-fanhui back"></i>
      </el-button>
    </div>
    <div class="information">{
   {params}}</div>
  </div>
</template>
<script>
  export default{
    name:'SkipIn',
    data(){
      return{
        msg: "路由传参页面",
        params: ""
      }
    },
    methods:{
      back: function(){
        this.$router.go(-1); //返回
      },
      showInfo: function(){
        // 对应写法 1. 2. 获取传过来的参数
          this.params = this.$route.params.name;
        // 对应写法 3. 获取传过来的参数
        this.params = this.$route.query.name;
      }
    },
    mounted(){
      this.showInfo();
    }
  }
</script>
<style lang="scss" scoped>
  #skipIn{
      width: 100%;
      height: 400px;
      background: red;
      .header{
          width: 100%;
          background: #eee;
          padding: 5px 20px;
          overflow: hidden;
          .info{
              font-size: 14px;
              line-height: 32px;
           }
          .backBtn{
              float: right;
              .back{
                  font-size: 14px;
              }
          }
      }
      .information{
          font-size: 20px;
      }
  }
</style>