vue路由传参的四种方式 详细举例

Vue路由传参的四种方式如下：

动态路由传参

在路由定义中使用冒号(:)占位符来定义动态路由参数，然后通过$route.params来获取参数。
例如，在路由定义中定义动态路由参数id：
const routes = [
{
path: '/user/:id',
component: User
}
]

在组件中获取id参数：
export default {
mounted() {
console.log(this.$route.params.id)
}
}

查询参数传参

将参数以键值对的形式添加到路由的查询参数中，然后通过$route.query来获取参数。
例如，在路由定义中添加查询参数：
const routes = [
{
path: '/user',
component: User
}
]

在组件中添加查询参数：
<router-link :to="{path: '/user', query: {id: 1}}">User</router-link>

在组件中获取id参数：
export default {
mounted() {
console.log(this.$route.query.id)
}
}

props传参

在路由定义中使用props属性来传递参数，然后在组件中通过props来接收参数。
例如，在路由定义中定义props参数：
const routes = [
{
path: '/user',
component: User,
props: { id: 1 }
}
]

在组件中接收id参数：
export default {
props: ['id'],
mounted() {
console.log(this.id)
}
}

路由元信息传参

在路由定义中添加meta属性来传递参数，然后在组件中通过$route.meta来获取参数。
例如，在路由定义中添加meta属性：
const routes = [
{
path: '/user',
component: User,
meta: { id: 1 }
}
]

在组件中获取id参数：
export default {
mounted() {
console.log(this.$route.meta.id)
}
}