vue3+ elemen-plus 首页点击按钮跳转到对应页面,并筛选数据
时间: 2024-04-11 09:27:33 浏览: 110
您可以使用 Vue Router 来实现页面之间的跳转,并使用 Element Plus 的筛选组件来筛选数据。下面是一个简单的示例:
首先,安装 Vue Router 和 Element Plus:
```bash
npm install vue-router element-plus
```
然后,在您的 Vue 项目中创建一个路由文件(比如 `router.js`),并配置路由信息:
```javascript
import { createRouter, createWebHistory } from 'vue-router';
import HomePage from './components/HomePage.vue';
import FilteredPage from './components/FilteredPage.vue';
const routes = [
{ path: '/', component: HomePage },
{ path: '/filtered', component: FilteredPage },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
```
接下来,将路由器配置应用到您的 Vue 实例中:
```javascript
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
createApp(App).use(router).mount('#app');
```
在您的首页组件(`HomePage.vue`)中,可以添加一个按钮,并通过 `router-link` 组件来实现跳转:
```html
<template>
<div>
<h1>Home Page</h1>
<router-link to="/filtered">
<button>Go to Filtered Page</button>
</router-link>
</div>
</template>
```
在筛选页面组件(`FilteredPage.vue`)中,您可以使用 Element Plus 的筛选组件来筛选数据:
```html
<template>
<div>
<h1>Filtered Page</h1>
<!-- 筛选组件的代码 -->
</div>
</template>
<script>
export default {
// 筛选组件的逻辑
}
</script>
```
这样,当用户在首页点击按钮时,就会跳转到筛选页面,并且您可以在筛选页面中使用 Element Plus 的筛选组件来筛选数据。
请记得根据您的具体需求进行适当的修改和调整。希望对您有所帮助!