vue 通过el-button使用组件跳转页面_vue.js 主页面组件替换或跳转

如果你使用了 Element UI 中的 `el-button` 组件，你可以通过在按钮点击事件中使用 Vue Router 实现页面跳转或组件替换的功能。以下是一个示例：

<template>
  <div>
    <el-button type="primary" @click="goToAnotherPage">跳转到另一个页面</el-button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';

export default {
  methods: {
    ...mapActions(['goToAnotherPage']),
  },
};
</script>

在上面的示例中，我们假设你已经按照之前提到的方式安装和配置了 Vue Router。然后，在按钮的点击事件中，调用 `goToAnotherPage` 方法实现页面跳转。

在路由配置文件中，你需要添加对应的路由规则，例如：

import VueRouter from 'vue-router';
import AnotherPage from './components/AnotherPage.vue';

const routes = [
  { path: '/another-page', component: AnotherPage },
  // 其他路由配置...
];

const router = new VueRouter({
  routes,
});

export default router;

通过这种方式，当你点击按钮时，会触发路由跳转，从而替换或跳转到另一个页面组件。

记得在使用 `el-button` 组件之前，确保已经正确引入了 Element UI，并按照官方文档进行了正确的配置。