demo需求分析：
图中菜单区域为header公用组件，点击相应的菜单选项跳转到对应的路由，在菜单下区域加载相应组件的内容。
以下两图分别为点击“我的电站”、“个人中心”的效果
demo结构介绍：
登录成功后，跳转到index页面，并默认显示index/UserStation（我的电站），index为一个组件，其他各个子菜单为一个组件，公共header为一个组件。
路由配置代码：
header组件关键代码:
基于Element-ui（只需要留意红框部分）：Element-ui知识请参考Element-ui官网，handleSelect函数调用时，告知父组件props中的active已经更
在Vue2.0中，嵌套路由是一种强大的功能，它允许我们构建复杂的单页应用程序（SPA），通过不同的路由路径来展示不同的组件。本教程将详细讲解如何使用Vue2.0的嵌套路由来实现页面内容的切换，以及如何通过公用的一级菜单控制这些内容。
需求分析显示我们需要一个公用的`header`组件，该组件包含菜单选项。当用户点击菜单项时，应导航到相应的路由，并在菜单下方区域加载相应的组件内容。例如，点击"我的电站"或"个人中心"时，应分别展示`UserStation`和某个个人信息相关的组件。
在Vue2.0中，我们可以利用`vue-router`库来实现路由管理。我们需要在项目中安装`vue-router`，然后创建路由配置。在路由配置文件（如`router.js`）中，我们将定义多个路由，包括一个主路由`index`和多个子路由，如`UserStation`、`PersonalCenter`等。例如：
```javascript
import Vue from 'vue';
import Router from 'vue-router';
import Index from '@/views/Index.vue';
import UserStation from '@/views/UserStation.vue';
import PersonalCenter from '@/views/PersonalCenter.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/index',
component: Index,
children: [
{ path: 'UserStation', component: UserStation },
{ path: 'PersonalCenter', component: PersonalCenter },
],
},
],
});
```
在这个配置中，`/index`是主路由，而`UserStation`和`PersonalCenter`是其子路由。由于它们是嵌套在`/index`下的，因此在`Index`组件内，我们可以使用`<router-view>`来渲染匹配到的子路由组件。
接下来，我们来关注`header`组件。这个组件通常会使用第三方UI库，比如Element-UI。在`header`组件中，我们可能有一个`el-menu`元素，每个菜单项对应一个路由路径。当用户点击菜单项时，我们调用`handleSelect`函数，将当前选中的路由路径发送给父组件。在Element-UI中，我们可以监听`select`事件来实现这一功能：
```html
<el-menu
mode="horizontal"
@select="handleSelect"
>
<el-menu-item index="/index/UserStation">我的电站</el-menu-item>
<el-menu-item index="/index/PersonalCenter">个人中心</el-menu-item>
</el-menu>
```
在`handleSelect`函数中，我们需要通知父组件当前选中的路由。由于Vue2.0的props是单向数据流的，我们可以通过`.sync`修饰符来实现父组件和子组件间的双向绑定：
```javascript
props: {
active: {
type: String,
required: true,
default: '',
sync: true,
},
},
methods: {
handleSelect(index) {
this.$emit('update:active', index);
},
}
```
在`Index.vue`中，我们引入`header`组件并传递`active` prop。同时，我们还需要监听`active`的变化，当`active`改变时，使用`this.$router.push`方法将新的路径推送到路由历史，从而实现页面的切换：
```javascript
<template>
<div>
<Header :active.sync="active" @update:active="onActiveChange"/>
<router-view></router-view>
</div>
</template>
<script>
import Header from '@/components/Header.vue';
export default {
components: {
Header,
},
data() {
return {
active: '/index/UserStation',
};
},
methods: {
onActiveChange(newActive) {
this.$router.push(newActive);
},
},
};
</script>
```
当我们完成登录后，可以使用`this.$router.push('/Index/UserStation')`来重定向到默认的`UserStation`页面。这样，用户一登录就会看到"我的电站"的页面。
总结起来，Vue2.0中的嵌套路由通过`vue-router`库实现，通过定义子路由和`<router-view>`来展示不同组件。配合`header`组件和菜单选择，我们可以轻松地控制页面内容的切换。同时，使用`.sync`修饰符确保了父子组件间的数据同步，使得路由能够根据用户的操作动态更新，从而提供流畅的用户体验。在整个过程中，良好的组件化和事件通信设计是关键，这有助于保持代码的整洁和可维护性。
