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.js
import 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-menu
router
class="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的入门学习，你应该在此基础之上，尝试设计更多 不同的页面，并逐步细化，以发现更多的不足并解决它们，从而提升前端工程 的开发能力。
学习记录，如有侵权请联系删除
,
