vue-router传递参数的几种方式实例详解

下面我来详细讲解“vue-router传递参数的几种方式实例详解”的完整攻略。

1. 传递参数的基本方式

在vue-router中，我们可以通过在router-link组件的to属性中传递参数，然后在目标组件中通过$route.params获取参数。具体步骤如下：

1. 设置router-link组件的to属性，传递参数。例如：

   // 在组件中使用router-link并设置to属性传递参数
<router-link :to="'/user/' + userId">Go to User</router-link>

2. 在目标组件中通过$route.params获取参数。例如：

   // 在目标组件中获取参数
export default {
data() {
return {
userId: this.$route.params.userId
}
}
}

2. 通过props传递参数

除了上述的基本方式，我们还可以通过props属性将参数传递给目标组件。具体步骤如下：

1. 在路由配置中设置props属性，例如：

   // 路由配置中设置props属性
{
path: '/user/:userId',
name: 'User',
component: User,
props: true
}

2. 在目标组件中通过props属性获取参数。例如：

   // 在目标组件中通过props属性获取参数
export default {
props: ['userId'],
data() {
return {
// 可以直接使用props传递过来的参数
}
}
}

3. 通过query传递参数

除了上述两种方式，我们还可以通过query属性传递参数。具体步骤如下：

1. 设置router-link组件的to属性，传递参数。例如：

   // 在组件中使用router-link并设置to属性传递参数
<router-link :to="{ name: 'User', query: { userId: 123 }}">Go to User</router-link>

2. 在目标组件中通过$route.query获取参数。例如：

   // 在目标组件中通过$route.query获取参数
export default {
data() {
return {
userId: this.$route.query.userId
}
}
}

以上就是传递参数的几种方式实例详解的攻略内容，希望能对你有所帮助。