利用VUE实现嵌套路由（实现类似于母版页功能）

组件内切换内容，相当于母版页内部切换路由则需要用到嵌套路由，app.vue里面一定会有router-vue标签用于进行展示渲染，母版页的生成用的是嵌套路由，菜单栏不发生变化，只有展示的路由内容发生变化

（1）安装element-ui

1.1打开终端（如图点击右边的方框）

去官方找到安装项目，之后再进行element-ui的安装

这一步需要重新配置镜像源，把镜像源配置为淘宝的镜像源或者清华的镜像源，不然下载的速度会特别慢导致下载失败

输入这段代码进行镜像源的修改

npm config set registry https://registry.npmmirror.com

（2）在main.js文件中引入element-ui（在快速上手中可以找的到）

（3）利用container布局容器进行相应的布局，选择自己所需要的布局的那部分代码

找到这段代码之后需要进行粘贴，style以及scrip也要进行粘贴

（4）新建文件夹containe，下面创建页面containerview，将相应的代码放到containerview中，除了对应的布局之外，样式和scrip也需要进行相应的改变

按下尖括号选择第一个会自动生成vue的框架，之后将代码进行复制粘贴如图

你进行切换的位置是router-view组件所在的位置，只要写在APP-view的一定会在页面中进行相应的展示

（5）创建子视图组件，用于效果展示

创建三个子页面，作为子页面之后的切换

（6）配置嵌套路由，在组件内部进行数据的展示，在配置路径中利用children数组进行子路由的设置

6.1

在APP.vue中进行设置展示页面

6.2在路由表中配置子路由，用于实现子页面的跳转

（7）利用router-view实现子视图标签的替换

将vue页面在router-view中进行相应的展示，进行动态的替换，相当于你在containerview.vue的你想展示对应页面的位置中放入router-view，这个时候就已经相当于当你点击菜单栏对应的跳转的位置时，将对应的页面在router-view所在的地方进行对应显示，一般来说是在main也就是主要内容所在的地方

在母版页的需要进行子页面展示的地方反方router-view进行展示

（8）在左侧导航栏中插入相应的跳转对应的标签

这个应该也可以在element找到相应的按钮，之后绑定相应的编程跳转的方法应该也可以

切换的是右侧的区域而不是整体的区域

（9）用redirect实现子路由的默认路由

（10）启动项目

实现子页面效果，点击p1，p2，p3会进行切换