vue中this.$route.query和this.$route.params

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>