Vue CLI工程是单页面的，为了保证能显示各式各样的页面，则需要 将页面的整个区域都设计为<Router-view/>，然后根据URL不同，加载 不同的视图组件（.vue文件）。即使将整个页面的显示区域作为一个<router-view/>，多个页面 仍可能存在共用的部分，例如：

routerView

如果要设计为以上风格，则页面中的右侧最大的区域也必须是一个 <router-view/>，就会形成最外部（页面所有部分）是<router-view/> 的同时，内部还有一个<router-view/>（右侧的大区域），在配置路由时，就需要使用到嵌套路由的做法了。

嵌套路由的使用方式

在router/index.js中，传统路由的配置大致是：

const routes = [ { path: '/', component: HomeView }, { path: '/about', component: () => import('../views/AboutView.vue') }];

而嵌套路由则需要在原路由的某对象中添加children属性，此属性仍是一 个数组，其内部的配置方式与routes常量是相同的，例如：

const routes = [ { path: '/admin', component: () => import('../views/AdminView.vue'), children: [ { path: 'user/list' , component: () => import('../views/admin/UserListView.vue') }, { path: 'user/add-new' , component: () => import('../views/admin/UserAddNewView.vue') } ] } ];

【提示】以上children下的配置中，各path没有使用/作为第1个字符，则 表示在父级路径的基础上增加，例如配置为user/list，由于父级配置了 /admin，则完整路径为/admin/user/list。

如果希望访问子级嵌套的视图（例如以上/admin对应的视图）时 就打开某个其子级视图（例如以上/admin/user/list对应的视图），在配 置存在子级的视图（例如以上/admin对应的视图）时，还可以添加 redirect属性，使其直接重定向到子级视图，例如：

const routes = [ // 省略前序代码 { path: '/admin', redirect: '/admim/user/list', component: () => import('../views/AdminView.vue'), children: [ // 省略子级代码 ] } ];

嵌套路由Demo

嵌套路由，需要修改的地方

//APP.vue 文件<template> <div id="app"> <router-view/> </div></template><style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; }</style>

//路由 index.jsimport Vue from 'vue'import VueRouter from 'vue-router'import LoginView from '../views/LoginView.vue'Vue.use(VueRouter)const routes = [ { path: '/', component: LoginView, meta: { title: '用户登录' } }, { path: '/admin', redirect: '/admin/user/list', component: () => import('../views/AdminView.vue'), children: [ { path: 'user/list', // /admin/user/list component: () => import('../views/admin/UserListView.vue'), meta: { title: '用户列表' } }, { path: 'user/add-new', // /admin/user/add-new component: () => import('../views/admin/UserAddNewView.vue'), meta: { title: '增加用户' } } ] }]const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes})//作用是根据名称 修改每个路由自己的名称router.beforeEach((to, from, next) => { if (to.meta.title) { document.title = to.meta.title } next()})export default router

//AdminView.vue文件<template><div> <!-- 整个后台管理页面的容器，内部为上下结构 --> <el-container> <!-- 上下结构的上半部分 --> <el-header class="layout-header"> <h3>这是上半部分</h3></el-header><!-- 上下结构的下半部分 --><el-container class="layout-body"> <!-- 下半部分的左侧结构 --> <el-aside class="layout-aside"> <el-menurouterclass="el-menu-vertical-demo"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"> <el-submenu index="/admin"> <template slot="title"> <i class="el-icon-location"></i><span>用户管理</span></template><el-menu-item index="/admin/user/add-new"> <i class="el-icon-location"></i><span>增加用户</span></el-menu-item><el-menu-item index="/admin/user/list"> <i class="el-icon-location"></i><span>用户列表</span></el-menu-item></el-submenu></el-menu></el-aside><!-- 下半部分的右侧结构 --><el-main> <router-view/> </el-main></el-container></el-container></div></template><style> * { margin: 0; } .layout-header { background: #2c3e50; color: #fff;}.layout-body { position: absolute; top: 60px; bottom: 0; left: 0; right: 0; }.layout-aside { background: dimgray; color: #fff; }</style>

//admin文件夹//UserAddNewView.vue<template> <div> <h3>这是增加用户页面</h3> </div></template>//UserListView.vue<template> <div> <h3>这是用户列表页面</h3> </div></template>

小结

通过以上内容的学习，你应该能够：

– 理解Vue CLI的单页面设计思想 – 掌握安装Node.js、配置npm源、安装Vue CLI、创建Vue CLI工程、在Vue CLI工程中安装常用框架 – 你应该自已做一些笔记，把相关的命令及注意事项记下来，而不是死记硬背 – 认识Vue CLI的工程的目录结构– 掌握.vue视图组件的基本开发 （认识此类文件的结构及特点）– 掌握Vue CLI中路由的配置 包括一般路由和嵌套路由 – 能从Element UI官网或相关网站找到你所需的（或相似的）页面设计，并处理成你需要的样子（永远不要死记硬背标签、属性等，而是应该尽可能多的使用各种标签，了解它们的特点，并结合官 方文档去使用，从而积累经验 – 掌握使用axios发送请求，并处理响应的结果）至此，你已经完成了Vue CLI的入门学习，你应该在此基础之上，尝试设计更多 不同的页面，并逐步细化，以发现更多的不足并解决它们，从而提升前端工程 的开发能力。

学习记录，如有侵权请联系删除