vue3+ elemen-plus 首页点击按钮跳转到对应页面,并筛选数据
时间: 2024-04-11 10:27:33 浏览: 854
可以通过以下步骤实现在 Vue 3 中使用 Element Plus 实现按钮点击跳转页面并筛选数据的功能:
1. 安装 Element Plus:在项目根目录下执行以下命令安装 Element Plus:
```bash
npm install element-plus
```
2. 在 main.js 文件中引入 Element Plus 的样式和组件:
```javascript
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
createApp(App)
.use(ElementPlus)
.mount('#app')
```
3. 在需要使用按钮的组件中,使用 `<el-button>` 组件创建按钮,并绑定点击事件:
```vue
<template>
<div>
<el-button @click="goToPage('page1')">跳转到页面1</el-button>
<el-button @click="goToPage('page2')">跳转到页面2</el-button>
</div>
</template>
<script>
export default {
methods: {
goToPage(page) {
// 根据不同的页面进行跳转
if (page === 'page1') {
this.$router.push('/page1')
} else if (page === 'page2') {
this.$router.push('/page2')
}
// 根据需要进行数据筛选
// ...
}
}
}
</script>
```
4. 在路由配置文件中,设置对应的路由路径和组件:
```javascript
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{ path: '/page1', component: Page1 },
{ path: '/page2', component: Page2 },
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
```
这样,当点击按钮时,会根据不同的页面进行跳转,并且你可以在 `goToPage` 方法中根据需要进行数据筛选的操作。请注意,在 Vue 3 中,使用的是 `createApp` 和 `createRouter`,而不是之前的 `Vue.use` 和 `VueRouter.createRouter`。另外,路由配置文件需要单独创建并导入。
阅读全文