vue路由传参的两种方式是什么 • Worktile社区

worktile

Worktile官方账号

Vue路由传参有两种方式：通过路由路径传参和通过路由查询参数传参。

路由路径传参：
路由路径传参是指在路由的路径中直接通过占位符的方式传递参数，参数可以作为路径的一部分传递给目标组件。
首先，在定义路由时，在路径中使用冒号加参数名的形式来定义占位符，例如：
```
{
  path: '/user/:id',
  component: User
}
```
其中，":id"就是路由路径中的参数占位符。
其次，在触发路由时，使用this.$router.push()方法传递参数，例如：
```
this.$router.push('/user/123')
```
最后，在目标组件中，可以通过$route.params来获取传递的参数，例如：
```
this.$route.params.id // 获取路由中的id参数值，即123
```
路由查询参数传参：
路由查询参数传参是指通过在URL中使用查询字符串的方式传递参数，参数会作为查询参数附加在URL后面。
首先，在定义路由时，使用props属性将路由的查询参数映射到组件的props中，例如：
```
{
  path: '/user',
  component: User,
  props: true
}
```
其次，在触发路由时，使用this.$router.push()方法传递参数，通过params对象指定查询参数，例如：
```
this.$router.push({ path: '/user', query: { id: '123' } })
```
最后，在目标组件中，可以直接通过props来获取查询参数，例如：
```
this.$route.query.id // 获取查询参数id的值，即123
```

2年前 0条评论

不及物动词

这个人很懒，什么都没有留下～

在Vue中，可以使用两种方式来传递参数给路由。

使用动态路由参数：
动态路由参数是通过在路由路径中定义占位符来实现的。在定义路由时，可以在路径中使用冒号（:）来指定一个参数。当路由匹配到这个路径时，参数的值会作为属性附加到$route对象中。

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: User,
      props: true // 将动态路由参数作为组件的属性传递
    }
  ]
})

// 组件
const User = {
  props: ['id'],
  template: '<div>User ID: {{ id }}</div>'
}

在上面的例子中，当访问路径 '/user/123' 时，组件User会被渲染，并且会传递一个名为'id'的属性，属性值为123。

使用查询参数：
查询参数是位于路径之后的参数，使用‘?’和‘&’来分隔参数。在Vue中，可以通过$route对象的query属性来访问查询参数。

// 路由配置
const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User,
      props: true // 将查询参数作为组件的属性传递
    }
  ]
})

// 组件
const User = {
  props: ['name'],
  template: '<div>User Name: {{ name }}</div>'
}

在上面的例子中，当访问路径 '/user?name=John' 时，组件User会被渲染，并且会传递一个名为'name'的属性，属性值为'John'。

这两种方式可以根据实际需要来选择使用。使用动态路由参数可以使URL更加友好和可读性强，适合用于较少参数的情况。而使用查询参数可以灵活地传递多个参数，适合用于较多参数或者参数类型不一致的情况。

2年前 0条评论

fiy

Worktile&PingCode市场小伙伴

在Vue中，路由传参有两种方式：URL参数传递和路由配置传递。下面分别进行介绍。

1. URL参数传递

URL参数传递是指将参数作为URL的一部分，通过url地址传递给目标组件。这种方式常用于传递简单的参数信息。下面是URL参数传递的步骤：

1.1 定义路由规则

在定义路由规则时，可以使用动态路由参数来匹配URL中的参数，将参数作为路由的一部分。例如，可以将用户ID作为参数传递给用户详情组件。

const routes = [
  { path: '/user/:id', component: User }
]

1.2 在目标组件中获取参数

在目标组件中，可以通过this.$route.params来获取URL中的参数。例如，在User组件中获取用户ID参数：

export default {
  mounted() {
    const userId = this.$route.params.id;
    // 处理逻辑
  }
}

1.3 跳转并传递参数

通过router-link组件可以跳转到目标组件，并传递参数。在模板中使用to属性指定目标路由，并在to属性值中使用对象的方式传递参数。

<router-link :to="{ path: '/user/' + userId }">User</router-link>

2. 路由配置传递

除了URL参数传递，Vue Router还提供了一种路由配置传递的方式，可以通过路由配置对象（route对象）来传递参数。这种方式适用于需要传递复杂参数对象的情况。下面是路由配置传递的步骤：

2.1 定义路由规则

在定义路由规则时，可以在路由配置中设置props属性，将参数传递给目标组件。

const routes = [
  { path: '/user', component: User, props: { userId: 123 } }
]

2.2 在目标组件中接收参数

在目标组件中，可以通过props选项来接收传递的参数。通过设置props选项为true，可以使得路由的params参数作为组件的props属性传递进来。

export default {
  props: ['userId'],
  mounted() {
    // 处理逻辑
  }
}

2.3 跳转并传递参数

与URL参数传递不同的是，路由配置传递的方式不需要在模板中使用router-link组件，而是直接通过router.push方法来实现跳转。

this.$router.push({ path: '/user', params: { userId: 123 } });

以上就是Vue中路由传参的两种方式：URL参数传递和路由配置传递。根据具体的需求，选择适合的方式进行参数传递。

2年前 0条评论