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

worktile

Worktile官方账号

Vue路由传参有两种模式，分别是通过路由查询参数和通过路由路径参数。

{
  path: '/user',
  component: User,
  props: route => ({ userId: route.query.userId })
}

然后，通过URL上的查询参数来传递参数，例如访问/user?userId=123，就会将userId的值设为123。

{
  path: '/user/:userId',
  component: User,
  props: true
}

然后，通过URL的路径来传递参数，例如访问/user/123，就会将userId的值设为123。

这两种传参模式在使用时可以根据具体需求选择。查询参数多用于参数可选、参数较多时；路径参数多用于参数必输、参数较少时。在组件中，可以通过props来接收传递的参数，从而在组件中使用传递的参数。

2年前 0条评论

不及物动词

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

在Vue路由中，可以使用两种不同的方式传递参数：URL参数和查询参数。

URL参数：URL参数是直接在路由路径中传递参数的方式。这种方式将参数直接添加到路由的路径中，通过冒号（:）标记参数的位置。例如，我们可以定义一个带有参数的路由路径如下：

{
  path: '/user/:id',
  component: User
}

在这个例子中，:id 表示一个动态的参数，它将作为一个属性添加到 $route.params 对象中。我们可以通过 $route.params.id 来访问这个参数的值。

使用URL参数传递参数的优点是可以直观地在路径中看到参数的值，方便调试和使用。但是缺点是在定义路由时需要提前约定好参数的名称和位置，并且在访问时需要手动拼接URL。

{
  path: '/user',
  component: User
}

我们可以通过添加查询字符串参数来传递参数，例如 /user?id=1。在这个例子中，id 是参数名，1 是参数值。这样的参数可以通过 $route.query 对象来访问，例如 $route.query.id。

使用查询参数传递参数的优点是灵活性较高，不需要提前定义参数的名称和位置，可以根据需要随时添加或移除参数。缺点是参数的值不直观地显示在路径中，对于复杂的参数传递可能需要手动构建查询字符串。

总结起来，URL参数适合传递固定的、重要的参数，而查询参数适合传递可选的、可变的参数。根据具体的需求选择合适的方式来传递参数。

2年前 0条评论

fiy

Worktile&PingCode市场小伙伴

Vue路由传参有两种模式，分别是通过路由路径传参和通过路由参数传参。

路由路径传参
路由路径传参是指将参数直接添加到URL路径中，通过动态路由的形式进行传递。例如，定义一个动态路由路径为/user/:id，其中:id表示参数，当URL为/user/1时，参数id的值就是1。

使用路由路径传参的步骤如下：

{
  path: '/user/:id',
  component: User,
}

methods: {
  getUserInfo() {
    const id = this.$route.params.id;
    // 使用id进行相应的操作
  }
}

<router-link :to="'/user/' + userInfo.id">个人中心</router-link>

路由参数传参
路由参数传参是指将参数直接添加到路由配置中的params字段中，通过这种方式进行传递。这种方式在跳转时比较方便，可以直接通过router.push方法或者<router-link>组件的to属性进行传递。

使用路由参数传参的步骤如下：

{
  path: '/user',
  component: User,
}

methods: {
  getUserInfo() {
    const id = this.$route.params.id;
    // 使用id进行相应的操作
  }
}

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

或者在模板中使用：

<router-link :to="{ path: '/user', params: { id: 1 }}">个人中心</router-link>

通过以上两种方式，可以实现在Vue路由中进行参数传递。在接收参数的组件中，可以通过this.$route.params来获取参数的值，从而进行相应的操作。

2年前 0条评论