element ui切换页面不使用路由
时间: 2023-09-01 14:12:41 浏览: 52
如果您不想使用路由切换页面,可以考虑使用 Vue 的动态组件。动态组件可以根据当前组件的状态或者属性来动态地渲染组件。以下是一个简单的示例:
```html
<template>
<div>
<button @click="showPage1">Page 1</button>
<button @click="showPage2">Page 2</button>
<component :is="currentPage"></component>
</div>
</template>
<script>
import Page1 from './Page1.vue'
import Page2 from './Page2.vue'
export default {
components: {
Page1,
Page2
},
data() {
return {
currentPage: 'Page1'
}
},
methods: {
showPage1() {
this.currentPage = 'Page1'
},
showPage2() {
this.currentPage = 'Page2'
}
}
}
</script>
```
在上面的示例中,我们定义了两个按钮,每个按钮都有一个点击事件,分别用于切换当前页面。我们使用了动态组件 `<component>` 来根据当前的 `currentPage` 属性动态渲染组件。在组件中,我们通过定义 `components` 属性来注册要渲染的组件。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)