vue使用路由router-view

前言：****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 目录里，新建 router 文件夹，并创建 index.js 文件。新建 views 目录，并把我们的 vue 页面全部放在这里。

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

<template><div>view-1</div></template><script>/* eslint-disable */exportdefault{name:'view-1',mounted(){},}</script>

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=functionpush(location){returnoriginPush.call(this, location).catch(err=> err);}const originReplace =VueRouter.prototype.replace;VueRouter.prototype.replace=functionreplace(location){returnoriginReplace.call(this, location).catch(err=> err);}const router =newVueRouter({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"},},]});exportdefault router;

2、编辑项目的main.js

import Vue from'vue';import App from'./App.vue';import router from'./router';// 引入并使用element-uiimport*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);newVue({render:h=>h(App),
  router,// 使用router}).$mount('#app')

2、编辑项目的App.vue

<template><div id="app"><el-menu
      :default-active="this.$route.path"class="el-menu-vertical-demo"
      router
      unique-opened
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"><div v-for="(routeItem, routeIndex) in routes":key="routeIndex"><el-submenu v-if="routeItem.children && routeItem.children.length > 0":index="routeItem.path"><template slot="title"><i :class="routeItem.meta.icon"></i><span>{{ routeItem.meta.title }}</span></template><el-menu-item
            v-for="(subItem, subIndex) in routeItem.children":index="subItem.path":key="subIndex"
            @click="handleShowItem(subItem)"><template slot="title"><i :class="subItem.meta.icon"></i><span>{{ subItem.meta.title }}</span></template></el-menu-item></el-submenu><el-menu-item v-else:index="routeItem.path" @click="handleShowItem(routeItem)"><template slot="title"><i :class="routeItem.meta.icon"></i><span>{{ routeItem.meta.title }}</span></template></el-menu-item></div></el-menu><router-view></router-view></div></template><script>/* eslint-disable */import router from"./router";exportdefault{name:'App',data(){return{routes:[],}},mounted(){this.routes =this.getRouter();},methods:{getRouter(){// 获取router的配置信息let{ routes =[]}= router.options;return routes;},handleShowItem(item){// 点击导航栏，切换页面this.$router.push({path: item.path
      })}},}</script><style>
#app {height: auto;}</style>

其中，如果 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 的内容。

结语

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