通过路由在 Vue.js 页面间传递数据的终极指南

2023-11-01 09:35:17

在 Vue.js 应用程序中，页面之间的数据传递是开发人员面临的常见任务。本文将深入探讨通过路由传递数据的各种方法，提供明确的步骤和代码示例。

引言

页面间的数据传递是构建动态且交互式 web 应用程序的关键方面。在 Vue.js 中，通过路由传递数据提供了一种灵活且有效的机制，允许组件共享信息。

方法

1. props

props 是子组件用于从父组件接收数据的特殊属性。子组件可以使用 v-bind 指令将父组件中的数据绑定到其 props。

<!-- 父组件 -->
<template>
  <child-component :data="data"></child-component>
</template>

<script>
  export default {
    data() {
      return {
        data: 'Hello from the parent!'
      }
    }
  }
</script>

<!-- 子组件 -->
<template>
  <p>{{ data }}</p>
</template>

<script>
  export default {
    props: ['data']
  }
</script>

2. $emit

$emit 方法允许子组件触发事件并向父组件发送数据。父组件可以使用 v-on 指令监听事件。

<!-- 子组件 -->
<template>
  <button @click="emitData">Send Data</button>
</template>

<script>
  export default {
    methods: {
      emitData() {
        this.$emit('data', 'Hello from the child!')
      }
    }
  }
</script>

<!-- 父组件 -->
<template>
  <child-component @data="handleData"></child-component>
</template>

<script>
  export default {
    methods: {
      handleData(data) {
        console.log(data) // Hello from the child!
      }
    }
  }
</script>

3. 路由参数

在路由中传递数据是一种有效的方法，特别是在页面之间的导航过程中。可以使用 $route.params 对象访问路由参数。

// 路由文件
const router = new VueRouter({
  routes: [
    {
      path: '/user/:id',
      component: UserComponent
    }
  ]
})

// 组件
<script>
  export default {
    data() {
      return {
        id: this.$route.params.id
      }
    }
  }
</script>