问题描述：

记录这几天在开发中遇见的一个关于路由传参后，页面刷新数据丢失的问题。场景如下：我需要携带参数id跳转到考试页面，在考试页面接收id，但是当考试页面刷新后，参数id就丢失了。（当时我是通过params传参的）
传参页面：

<button @click="toExam(xxx.id)">去考试</button>

路由配置：

{
	path: '/exam',		//组件路径
    name: 'exam',		//组件别名
    component: () => import('@/views/common/testTaking/exam.vue')		//组件名
}

路由传参的几种基本方式:

一、params传参

该种方式是使用name匹配路由，通过params来传递参数
传参页面：

//因为params必须用name来识别路径，所以在配置路由的时候一定要写name
toExam(id){
	this.$router.push({
		name:"exam",
        params:{
        	id:item.id
        }
	})
}

接收参数页面：

//接收参数直接用this.$route.params.id就能获取到参数
let id = this.$route.params.id;  
//！！！注意
//接收参数时使用的是：$route
//传参时使用的是：$router

二、直接调用$router.push 携带参数跳转

传参页面：

toExam(id){
	this.$router.push({path: `/exam/${id}`})
}

路由配置：（这种方式就要在path后面加上:id对应传递的参数）

{
	path: '/exam/:id', 
    name: 'exam',
    component: () => import('@/views/common/testTaking/exam.vue')
}

接收参数页面：

//和params接收参数一样，直接用this.$route.params.id就能获取到参数
let id = this.$route.params.id;  

三、query传参

使用path来匹配路由，通过query来传递参数
传参页面：

toExam(id){
	this.$router.push({
          path: '/exam',
          query: {
            id: id
          }
        })
}

接收参数页面：

//直接用this.$route.query.id就能获取到参数
let id = this.$route.query.id;  

解决方案：

1、使用query来传参

这种方式是可以解决页面刷新参数消失问题的，这种方式类似于ajax中的get方法，参数是直接在url后面可见的

2、使用params传参

使用params传参类似于ajax中的post请求方式，参数都是不可见的，这种传参方式有一种弊端就是在页面刷新后，传过来的数据会丢失。如果想解决这个问题，则需要在配置路由时path后面加上:id。如：

{
	path: '/exam/:id', 
    name: 'exam',
    component: () => import('@/views/common/testTaking/exam.vue')
}