Vue路由传参的三种方式实例详解

当我们使用Vue框架进行开发时，Vue路由传参是一项非常常见的操作，可以通过多种方式进行实现。本篇攻略将为大家介绍Vue路由传参的三种具体实例，帮助开发者更好地了解和掌握Vue路由传参的使用方法。

路径参数

路径参数是一种常见的路由传参方式，它可以将参数添加到URL的路径中，如下：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

在这个例子中，我们定义了一个路由规则，指定了路径为 /user/:id。在这个路径中，:id 是一个参数，可以通过 $route.params.id 访问到路由参数。用户可以通过浏览器URL中添加该参数的具体值访问到该页面，如：/user/123，这样就可以访问到 /user/ 页面，并且参数id 的值为 123。

此外，我们还可以在Vue组件中使用下面的代码来获取路由参数：

export default {
  mounted() {
    console.log(this.$route.params.id)
  }
}

上述代码实现了在创建Vue实例时，打印出路由参数id 的值。这里的 $route 是Vue自带的属性，用于访问当前路由信息对象。

查询参数

查询参数是另一种常见的路由传参方式，它可以将参数添加到URL的查询参数中，如下：

const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User
    }
  ]
})

在这个例子中，我们定义了一个路由规则，指定了路径为 /user。用户可以通过在浏览器URL中通过添加查询字符串参数的方式，访问该页面，如：/user?id=123。

在组件中，我们可以通过 $route.query.id 来访问到路由中的查询参数id：

export default {
  mounted() {
    console.log(this.$route.query.id)
  }
}

在上述代码中，我们打印了查询参数id的值。同样，在组件中也可以通过 $route 访问当前路由信息对象。

通过params传递参数

除了上述两种传参方式，Vue还提供了一种通过params参数传递参数的方式，在组件切换过程中传递参数。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User
    }
  ]
})

在组件中使用 $router.push 方法来切换路由，并通过params传递参数：

this.$router.push({ name: 'user', params: { id: 123 }})

在上述代码中，我们使用 $router.push 方法切换路由，分别传递了组件名和路由参数。在接收到这些参数后，组件可以通过 $route.params 统一访问到路由参数。

此外，我们还可以在组件中使用 $route.params 来直接获取路由参数。例如：

export default {
  mounted() {
    console.log(this.$route.params.id)
  }
}

这样可以在组件创建时，打印出路由参数id的值。

以上三种方式是Vue路由传参的常用方法，开发者可以根据具体的需求进行选择和使用。