非专业前端，局限性较高，有些问题看起来很小，但是初次接触很棘手，需要查找很多博客，内容也很杂。以下只是过程中总结下来的，要解决的就是标题中的三个问题。

这是我需要达成的效果。

1.第一个是进入导航菜单切换局部页面。

(1)在index.js中配置路由的时候作为导航页的子级。

(2)vue页面，<router-view/>他会根据当前地址栏的路径在<el-main>这个组件的位置上给你展示

相应的局部页面。

2.完成1之后，我们可以看到这个页面的基本结构如下图。

需要继续解决一些问题，问题一，进入页面的时候默认展示“订阅管理”这个子级的内容。问题二，在刷新的时候，选中的菜单不会改变（不会丢失）。

对于问题一，重定向。也就是在进入该页面之前重定向到某个子级。

第二个问题，刷新之后保持不变，就是让activeIndex始终指向当前地址栏这个路径。

3.贴代码

index.js:

export default new Router({routes: [{path: '/',redirect: '/login'},{path: '/login',name: 'login',component: Login},{path: '/menu',component: Menu,redirect: '/paper',children: [{path: '/paper',component: Paper},{path: '/user',component: User},{path: '/order',component: MyOrder}]}]
})

menu页面:

<template><div><el-container><el-aside width="200px"><el-menu:default-active="activeIndex"class="el-menu-demo"@select="handleSelect"routerstyle="height: 100vh;border: 1px solid #eee;margin: 0;border: 0;padding: 0;"><el-menu-item index="/paper"><i class="el-icon-notebook-2"></i><span slot="title">订阅管理</span></el-menu-item><el-menu-item index="/user"><i class="el-icon-user-solid"></i><span slot="title">个人信息管理</span></el-menu-item><el-menu-item index="/order"><i class="el-icon-s-order"></i><span slot="title">订单管理</span></el-menu-item></el-menu></el-aside><el-main><router-view/></el-main></el-container></div>
</template>
<script>
export default {name: "menu",data() {return {activeIndex: this.$route.path,}},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);},},
}
</script>