一篇文章快速搞懂Vue路由传参的三种方法

1、第一种 页面刷新数据不会丢失

methods：{
  gotoPage(id) {
    //直接调用$router.push 实现携带参数的跳转
     this.$router.push({
       path: `/homepage/${id}`,
     })
}

路由配置：

	{
	     path: '/homepage/:id',
	     name: 'homepage',
	     component: homepage
    }

接受参数：

    this.$route.params.id

1、第二种

methods：{
  gotoPage(id) {
       this.$router.push({
          name: 'homepage',  // 注意这里是name，不是path
          params: {
            id: id
          }
        })
  }

路由配置：

   {
	     path: '/homepage',
	     name: 'homepage',
	     component: homepage
   }

接受参数：

    this.$route.params.id

3、第三种

methods：{
  gotoPage(id) {
        this.$router.push({
          path: '/homepage',   // 这里又成了path
          query: {
            id: id
          }
        })
  }

路由配置：

	{
	     path: '/homepage',
	     name: 'homepage',
	     component: homepage
    }

接受参数：

	this.$route.params.id