使用vue-router在Vue页面之间传递数据的方法

下面为你详细讲解使用vue-router在Vue页面之间传递数据的方法：

1. 使用props传递数据

我们可以通过在组件之间传递props来实现数据的传递，由于vue-router本质上是一个路由组件，因此我们可以使用props在路由之间传递数据。

1.1 在路由中定义props

我们可以通过在路由中定义props来让vue-router接收传递过来的数据。

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      component: User,
      props: true
    }
  ]
})

上面的代码中，我们通过设置props为true，来开启路由的props传递功能。

1.2 在组件中接收props

在目标组件中，我们可以使用props选项来接收从路由中传递来的数据。

// User.vue
export default {
  props: ['userId'],
  mounted() {
    console.log(this.userId)
  }
}

上面的代码中，我们使用props选项来接收路由中传递过来的userId属性，并在mounted钩子函数中输出它。

1.3 进行路由跳转传递数据

我们可以通过在router-link中通过to属性使用路由参数来进行传递数据。

<router-link :to="{path:'/user', params:{userId:1}}">用户详情页</router-link>

上面的代码中，我们使用to属性来指定跳转的路由以及传递的参数，其中params为传递的参数对象，可以在路由中使用:属性名进行接收。

2. 使用query传递数据

另一种传递数据的方式是使用query参数进行传递。

2.1 在路由中定义query

我们可以在路由中通过query属性定义需要传递的数据。

const router = new VueRouter({
  routes: [
    {
      path: '/user',
      component: User
    }
  ]
})

2.2 在组件中接收query

在目标组件中，我们可以通过$route对象的query属性来接收query参数。

// User.vue
export default {
  mounted() {
    console.log(this.$route.query)
  }
}

上面的代码中，我们在mounted钩子函数中使用$route对象的query属性来接收传递的参数。

2.3 进行路由跳转传递数据

我们可以通过在router-link中通过to属性使用query参数来进行传递数据。

<router-link :to="{path:'/user', query:{userId:1}}">用户详情页</router-link>

上面的代码中，我们使用to属性来指定跳转的路由以及传递的参数，其中query为传递的参数对象，可以在组件中使用$route.query.属性名进行接收。

以上就是使用vue-router在Vue页面之间传递数据的方法，希望能对你有所帮助。