vue路由跳转时传递参数

vue中路由跳转通常使用"this.$router.push(path)"或者<router-link>实现，下面主要说一下各方式如何在跳转的过程中传递参数。

router.js配置:
	 { path: '/test', name: 'test', component: () => import('@/views/test') }

一、this.$router.push({ name: ‘name’, params: {…} })

注：使用params进行传值，只能使用name做跳转，不能使用path，否则会接收不到参数。（亲测）
跳转：
	this.$router.push({
        name: 'test',
        params: {
          test: '456'
        }
      })
test.vue中接收参数：
	this.$route.params.test

二、this.$router.push({ path: ‘path’, query: {…} })

注：使用query传参，使用path或者name做跳转都能接收到参数
跳转：
this.$router.push({
     name: 'test',
     query: {
       test: '000'
     }
 })
 test.vue接收参数：
 	this.$route.query.test

三、<router-link>

路由跳转：
	<router-link :to="{ path: '/test', query: { test: '111' }}">
	      <el-button type="primary">测试</el-button>
	</router-link>
test.vue中接收：
	this.$route.query.test
注：使用"name"做路由，"params"传参，使用"this.$route.params.test"也可以接收到参数。

四、在path路径中传参

router.js：
	{ path: '/test/:id', name: 'test', component: () => import('@/views/test') }
跳转：
	this.$router.push({
        path: '/test/' + id
      })
接收参数：
	this.$route.params.id