前言： router-view与NavMenu导航栏的配合，在web应用中极为常见。其原理就是采用SPA(single-page-application)模式，就是只有一个Web页面的应用，通过router来控制页面的刷新和迭代。

提示： 以下示例基于vue2.6.14版本，vue-router3.5.2版本，element-ui2.15.12版本。
好了，废话不多说，我们直接贴上全部代码

一、创建vue页面与js脚本

1、 如下图，我们在项目的src目录里，新建route文件夹，并创建index.js文件。新建views目录，并把我们的vue页面全部放在这里。

2、 其中每个index.vue的内容都很简单，只有一行文字

3、 另外package.json的依赖关系也一并贴上， 至此可以执行npm install来安装依赖库

二、编写脚本

1、编辑router目录的index.js文件 (这里只做了二级目录的深度)

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);/*
* 我们在项目中使用router.push或router.replace时，如果在A界面继续跳转A界面，就会抛出异常报错。
* 这里处理一下捕获异常的逻辑，就可以避免报错了。
*/
const originPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {return originPush.call(this, location).catch(err => err);
}const originReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function replace(location) {return originReplace.call(this, location).catch(err => err);
}const router = new VueRouter({mode: "history",routes: [{path: "/view-1",name: "view-1",component: { render: e => e("router-view") }, // 这里就是将children的内容渲染到页面上meta: { title: 'view-1', keepAlive: true, icon: "el-icon-document-copy" },children: [{path: "/view-1/view-1-1", // 这个path可以去掉 /view-1，这里只是方便知道其从属关系name: "view-1-1",component: () => import('@/views/view-1-1'),meta: { title: 'view-1-1', keepAlive: true, icon: "el-icon-film" },},{path: "/view-1/view-1-2",name: "view-1-2",component: () => import('@/views/view-1-2'),meta: { title: 'view-1-2', keepAlive: true, icon: "el-icon-bank-card" },}],},{path: "/view-2",name: "view-2",component: { render: e => e("router-view") },meta: { title: 'view-2', keepAlive: true, icon: "el-icon-connection" },children: [{path: "/view-2/view-2-1",name: "view-2-1",component: () => import('@/views/view-2-1'),meta: { title: 'view-2-1', keepAlive: true, icon: "el-icon-odometer" },}],},{path: "/view-3",name: "view-3",component: () => import('@/views/view-3'),meta: { title: 'view-3', keepAlive: true, icon: "el-icon-truck" },},]
});
export default router;

2、编辑项目的main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';// 引入并使用element-ui
import * as element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import 'element-ui/lib/theme-chalk/display.css';Vue.config.productionTip = false;
Vue.use(element);new Vue({render: h => h(App),router, // 使用router
}).$mount('#app')

2、编辑项目的App.vue

其中，如果router里配置的children不存在，我们直接使用el-menu-item来显示，如果children有值，就使用el-submenu来处理目录级别，但其最终还是要用el-menu-item来显示标题内容。另外，我们还要加上
router-view，这个标签才会把路由里对应的组件渲染出来。

三、运行与查看

我们已经执行过了npm install了，这里直接执行npm run serve启动项目，并查看，如下图(没有做任何的样式调整，界面有些不好看)：
点击view-1-2，下方白色区域的内容变成了view-1-2/index.vue的内容。

点击view-3，下方白色区域的内容变成了view-3/index.vue的内容。

结语

以上内容就可以实现如题所示的问题，希望对你有所帮助