Vue.js和Element UI结合实现嵌套页面的代码，包括在 router-view 中默认显示一个页面以及添加切换按钮的功能

源码资源网

下面是一个示例Vue.js和Element UI结合实现嵌套页面的代码，包括在 `router-view` 中默认显示一个页面以及添加切换按钮的功能，并使用中文：

1. html
   
2. <template>
   
3.   <div>
   
4.     <el-button @click="showPage('page1')">页面1</el-button>
   
5.     <el-button @click="showPage('page2')">页面2</el-button>
   
6.     <el-button @click="showPage('page3')">页面3</el-button>
   
7.     <router-view :key="currentPage"></router-view>
   
8.   </div>
   
9. </template>
   
10. <script>
    
11. import Page1 from './components/Page1.vue';
    
12. import Page2 from './components/Page2.vue';
    
13. import Page3 from './components/Page3.vue';
    
14. export default {
    
15.   components: {
    
16.     Page1,
    
17.     Page2,
    
18.     Page3
    
19.   },
    
20.   data() {
    
21.     return {
    
22.       currentPage: 'page1' // 默认显示页面1
    
23.     };
    
24.   },
    
25.   methods: {
    
26.     showPage(page) {
    
27.       this.currentPage = page;
    
28.     }
    
29.   }
    
30. };
    
31. </script>

复制代码

在这个示例中：-假设 Page1.vue 、 Page2.vue 和 Page3.vue 是分别对应页面1、页面2和页面3的组件。您可以在相应的组件文件中编写页面内容。
请根据实际情况修改和补充 Page1.vue 、 Page2.vue 和 Page3.vue 中的内容，以便显示您想要的页面布局和元素。

- 通过使用 `<el-button>` 元素创建了三个切换按钮，分别显示为“页面1”、“页面2”和“页面3”。
- 在 `<router-view>` 中使用`:key="currentPage" `来根据` currentPage `的值动态显示相应页面。
- 在Vue实例中，通过` showPage `方法来更新` currentPage`的值，从而切换显示的页面。
您可以根据实际需求自定义页面内容和路由配置。