Vue 中通过按钮在同一路径跳转不同组件的终极指南

vue.js

2024-03-10 16:44:40

Vue 中通过按钮跳转到同一路径的其他组件

概述

在 Vue.js 应用程序中，有时我们需要在不改变路径的情况下，从按钮跳转到同一个页面上的其他组件。这在需要动态加载组件或创建多步骤流程时非常有用。

解决方案

以下步骤介绍了如何在 Vue.js 中通过按钮跳转到同一路径上的其他组件：

1. 使用 router.push 方法

在源组件（例如 PayrollEdit.vue）中，使用 router.push 方法来导航到目标组件（例如 InProgressList.vue）：

<a-button type="primary" @click="$router.push({ path: '/payroll/process', query: { component: 'InProgressList' } })">确认</a-button>

2. 在目标组件中监听 query 参数

在目标组件（例如 PayrollProcess.vue）中，使用 watch 来监听 query 参数：

watch: {
  '$route.query.component': {
    handler(val) {
      if (val) {
        this.component = () => import(`@/pages/payroll/${val}.vue`);
      }
    },
    immediate: true, // 立即执行
  }
}

这将动态加载目标组件。

3. 加载组件

目标组件中，在 data 中定义一个变量 component，用于动态加载组件：

data() {
  return {
    component: null,
  };
}

然后，在 watch 处理函数中，将目标组件的名称设置为 component：

this.component = () => import(`@/pages/payroll/${val}.vue`);

例子

以下是完整的示例：

PayrollEdit.vue

<template>
  <a-button type="primary" @click="$router.push({ path: '/payroll/process', query: { component: 'InProgressList' } })">确认</a-button>
</template>

PayrollProcess.vue

<template>
  <component :is="component"></component>
</template>

<script>
export default {
  data() {
    return {
      component: null,
    };
  },
  watch: {
    '$route.query.component': {
      handler(val) {
        if (val) {
          this.component = () => import(`@/pages/payroll/${val}.vue`);
        }
      },
      immediate: true,
    }
  },
}
</script>