Nuxt.js 路由跳转传参解析，尽在掌握！

2024-01-24 06:33:32

前言

在现代前端开发中，构建单页面应用 (SPA) 时，路由是一个不可或缺的关键要素。Nuxt.js 作为一套基于 Vue.js 的通用框架，提供了对路由的强大支持，使其成为构建 SPA 应用的首选之一。在 Nuxt.js 中，路由跳转传参是常见且重要的操作，它允许您在页面之间传递数据，以满足不同的业务需求。

Nuxt.js 中路由跳转传参的几种方式

在 Nuxt.js 中，您可以通过以下几种方式进行路由跳转传参：

1. 通过 `params` 传参

params 是 Nuxt.js 中最常用的传参方式，它允许您在路由的 URL 中直接传递参数。这种方式简单易用，并且可以与 Nuxt.js 的路由生成器完美配合。

例如，以下代码演示了如何使用 params 传参：

// routes/index.js
export default [
  {
    path: '/user/:id',
    component: () => import('~/components/User.vue'),
  },
];

// pages/index.vue
<template>
  <nuxt-link :to="'/user/' + userId">
    Go to User
  </nuxt-link>
</template>

<script>
export default {
  data() {
    return {
      userId: 1,
    };
  },
};
</script>

在这个示例中，我们首先在路由配置中定义了一个名为 /user/:id 的路由，其中 :id 是一个动态参数。然后，在组件中，我们使用 nuxt-link 组件生成一个链接，并通过 :to 属性将 userId 数据作为参数传递给路由。当用户点击这个链接时，Nuxt.js 将自动将 userId 参数添加到 URL 中，并跳转到 /user/1 页面。

在目标组件中，您可以通过 this.$route.params.id 来访问传递的参数。

2. 通过 `query` 传参

query 是一种通过 URL 查询字符串传递参数的方式。它与 params 的主要区别在于，query 参数不会影响路由的 URL，而是附加在 URL 的末尾，以 ? 分隔。

以下代码演示了如何使用 query 传参：

// routes/index.js
export default [
  {
    path: '/user',
    component: () => import('~/components/User.vue'),
  },
];

// pages/index.vue
<template>
  <nuxt-link :to="'/user?id=' + userId">
    Go to User
  </nuxt-link>
</template>

<script>
export default {
  data() {
    return {
      userId: 1,
    };
  },
};
</script>

在这个示例中，我们同样在路由配置中定义了一个名为 /user 的路由，但这次没有使用动态参数。在组件中，我们使用 nuxt-link 组件生成一个链接，并通过 :to 属性将 userId 数据作为查询参数传递给路由。当用户点击这个链接时，Nuxt.js 将自动将 userId 参数添加到 URL 的查询字符串中，并跳转到 /user?id=1 页面。

在目标组件中，您可以通过 this.$route.query.id 来访问传递的参数。

3. 通过 `store` 传参

如果您需要在多个组件之间共享数据，或者需要在客户端和服务器端之间共享数据，那么您可以使用 store 来传递参数。

以下代码演示了如何使用 store 传参：

// store/index.js
export const state = () => ({
  userId: null,
});

// mutations.js
export const setUserId = (state, userId) => {
  state.userId = userId;
};

// pages/index.vue
<template>
  <nuxt-link @click="setUserId(1)">
    Go to User
  </nuxt-link>
</template>

<script>
export default {
  methods: {
    setUserId(userId) {
      this.$store.commit('setUserId', userId);
    },
  },
};
</script>

在这个示例中，我们首先在 Vuex store 中定义了一个名为 userId 的状态。然后，在组件中，我们使用 @click 事件监听器调用 setUserId 方法，并将 userId 数据作为参数传递给该方法。setUserId 方法将使用 Vuex 的 commit 方法将 userId 数据提交给 store。在目标组件中，您可以通过 this.$store.state.userId 来访问传递的参数。