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

Bertha 。 2023-06-20 13:59 11阅读 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>