vue路由传值

前端开发 2024-12-24 3

在Vue中，路由传值一般是指经过路由传递参数到组件。Vue供给了两种首要的方法来在路由间传递参数：URL参数和查询参数。

URL参数

URL参数是在路由装备中界说的，能够直接经过路由途径传递。例如，假定咱们有一个用户概况的页面，咱们或许想经过用户的ID来拜访这个页面。咱们能够这样装备路由：

```javascript// router/index.jsimport Vue from 'vue'import Router from 'vuerouter'import UserDetail from '@/components/UserDetail'

Vue.use

export default new Router}qwe2```

在上面的比如中，`:id`是一个动态的途径参数。当用户拜访`/user/123`时，`id`的值将是`123`。

在组件内部，你能够经过`this.$route.params`来拜访这些参数：

```javascript// UserDetail.vueexport default { mounted { const userId = this.$route.params.id; console.log; }}```

查询参数

查询参数是在URL的查询字符串中传递的，一般用于传递多个键值对。例如，咱们或许想传递用户的姓名和年纪：

```javascript// 在其他组件中this.$router.push;```

上面的代码会导航到`/user/123?name=John