目录

在 Vue Element Admin 中，要通过按钮跳转界面并传递参数，你可以使用路由的方式，并在跳转时通过 URL 参数传递数据。以下是一种常见的方法：

0.了解路由的跳转方式

1. 设置路由：

2. 在按钮点击事件中导航到目标页面：

3. 接收参数：

在 Vue Element Admin 中，要通过按钮跳转界面并传递参数，你可以使用路由的方式，并在跳转时通过 URL 参数传递数据。以下是一种常见的方法：

0.了解路由的跳转方式

this.$router.push 是 Vue Router 提供的方法之一，用于在 Vue.js 中进行编程式的路由导航。它可以让你在 JavaScript 代码中动态地导航到不同的路由。
用法：

this.$router.push(location, onComplete?, onAbort?)

1.location: (required) 字符串或对象，表示要导航到的目标路由。可以是一个字符串路径或一个描述目标位置的对象。对象可以包含 path、query、params、hash等属性。
2.onComplete: (optional) 导航成功完成时的回调函数。
3.onAbort: (optional) 导航被中止时的回调函数。

示例：

4.导航到具有路径的目标路由：

// 导航到路径为 '/about' 的路由
this.$router.push('/about');

5.导航到具有参数的目标路由：

// 导航到带有参数的路由
this.$router.push({ path: '/user', params: { userId: 123 }});

6.导航到具有查询参数的目标路由：

// 导航到带有查询参数的路由
this.$router.push({ path: '/profile', query: { plan: 'paid' }});

7.添加完成时的回调函数：

// 导航到路径为 '/home' 的路由，并在导航完成后执行回调函数
this.$router.push('/home', () => {
  console.log('导航完成！');
});

这就是 this.$router.push 的基本用法。通过使用它，你可以在 Vue.js 应用程序中进行灵活的路由导航操作。

1. 设置路由：

// 路由配置示例
const routes = [
  {
    path: '/target-page/:param',
    name: 'TargetPage',
    component: TargetPage
  }
];

假设你有一个按钮，当点击它时需要跳转到另一个页面，并且需要传递参数。首先，确保你的路由配置允许接收参数。

在这个示例中，:param 是一个动态参数，你可以在跳转时将其替换为实际的参数值。

2. 在按钮点击事件中导航到目标页面：

<template>
  <el-button type="primary" @click="navigateToTargetPage">跳转页面</el-button>
</template>

<script>
export default {
  methods: {
    navigateToTargetPage() {
      // 假设参数值为 "exampleParam"
      const paramValue = "exampleParam";
      this.$router.push({ name: 'TargetPage', params: { param: paramValue } });
    }
  }
}
</script>

在这个示例中，当按钮被点击时，会调用 navigateToTargetPage 方法。在这个方法中，我们使用 $router.push 导航到目标页面，并通过 params 选项传递参数。

3. 接收参数：

在目标页面（TargetPage）的组件中，你可以通过 $route.params 来获取传递的参数值。

<template>
  <div>
    <p>接收到的参数值：{{ $route.params.param }}</p>
  </div>
</template>

<script>
export default {
  mounted() {
    // 在组件加载完成后，获取参数值
    console.log('接收到的参数值：', this.$route.params.param);
  }
}
</script>