Vue router 路由传递参数

简单介绍一下业务需求：

前端有一个列表页，每一行数据的标题都是一个文字按钮，点击后能够通过路由跳转到该数据对象的详情页中。我们要实现路由时通过路径传参，从而使详情页可以获取到必要的参数，来发送后续请求。

列表页绑定路由跳转的标题节点代码块如下所示：

<el-table>
	<el-table-column
	      label="MR 标题"
	      min-width="10%"
	      align="center">
	      <template v-slot="scope">
	         <el-button type="text" @click="$router.push(`/student/agile/${courseId}/gitcodecr/${scope.row.gitProjectId}/mrdetails/${scope.row.id}`)">
	           {{ scope.row.title }}
	         </el-button>
	      </template>
	   </el-table-column>
</el-table>

其中，对应的路由表如下：

{
	path: '/student/agile/:courseId/gitcodecr/:gitProjectId/mrdetails/:mrId',
	component: () => import('@/views/***/***/gitcodecr/details/Mrdetails'),
	props: true
},

上述代码可以看到，我们使用了 $router 向指定页面传递了三个参数，分别是：courseId、gitProjectId 以及 mrId。

在对应的下级界面中，我们仅需要通过 this.$route.params 的方式就可以获取这三个参数了。

this.courseId = this.$route.params.courseId;
this.gitProjectId = this.$route.params.gitProjectId;
this.mrId = this.$route.params.mrId;