Vue.js 路由的魅力：挖掘 Vue 页面间数据传递的秘诀

在 Vue.js 应用中，组件间数据传递是构建应用程序的关键环节。vue-router 作为一款强大的路由库，为组件间数据传递提供了多种方法，包括路由参数、查询参数、props 和 Vuex。本文将带领您探索这些方法，并根据不同场景选择最合适的方法。

1. 路由参数：传递简单数据

路由参数是最简单的方法，它允许您将数据作为路由的一部分传递。例如，您有一个显示用户详细信息的组件，可以将用户 ID 作为路由参数传递。

// 路由配置
const routes = [
  {
    path: '/user/:id',
    component: UserDetails
  }
];

// 组件代码
export default {
  mounted() {
    const userId = this.$route.params.id;
    // 使用 userId 获取用户数据
  }
};

2. 查询参数：传递查询字符串

查询参数允许您将数据作为查询字符串传递。例如，您有一个搜索组件，可以将搜索词作为查询参数传递。

// 路由配置
const routes = [
  {
    path: '/search',
    component: SearchResults
  }
];

// 组件代码
export default {
  mounted() {
    const searchTerm = this.$route.query.q;
    // 使用 searchTerm 获取搜索结果
  }
};

3. props：传递复杂数据

props 允许您将复杂数据从父组件传递给子组件。例如，您有一个包含列表和详细信息视图的应用程序，可以使用 props 将列表数据传递给详细信息视图。

// 父组件代码
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    };
  },
  template: `<child-component :items="items"></child-component>`
};

// 子组件代码
export default {
  props: ['items'],
  template: `<ul><li v-for="item in items">{{ item.name }}</li></ul>`
};

4. Vuex：管理全局状态

Vuex 是一个状态管理库，允许您在应用程序的各个组件中共享数据。例如，您有一个包含多个组件的购物车应用程序，可以使用 Vuex 来管理购物车中的商品。

// Vuex store 代码
const store = new Vuex.Store({
  state: {
    cart: []
  },
  mutations: {
    addToCart(state, item) {
      state.cart.push(item);
    }
  }
});

// 组件代码
export default {
  methods: {
    addToCart(item) {
      this.$store.commit('addToCart', item);
    }
  }
};

总而言之，vue-router 为组件间数据传递提供了多种方法，包括路由参数、查询参数、props 和 Vuex。您可以根据需要选择最合适的方法，并构建出健壮、灵活的 Vue.js 应用。