Vue路由传参详解

在Vue中，路由传参可以通过路由的params或query属性来实现。

使用params传参

在路由定义时，通过在path中添加动态参数，例如:
{
path: '/user/:id',
name: 'user',
component: User
}
登录后复制
然后在组件内部通过$route.params来获取参数，例如:
<template>
<div>
<h2>User {{ $route.params.id }}</h2>
</div>
</template>
登录后复制

使用query传参

在路由定义时，通过在path中添加查询参数，例如:
{
path: '/user',
name: 'user',
component: User
}
登录后复制
然后在调用路由时，通过query属性来传递参数，例如:
<router-link :to="{ name: 'user', query: { id: 123 }}">User</router-link>
登录后复制
在组件内部通过$route.query来获取参数，例如:
<template>
<div>
<h2>User {{ $route.query.id }}</h2>
</div>
</template>
登录后复制
需要注意的是，params传参是通过路由路径中的动态参数来实现的，而query传参是通过在路由跳转时的query属性来实现的。因此，在使用query传参时，路由跳转后浏览器地址栏中会带有查询参数，而使用params传参则不会。