vue脚手架创建配置（Vue脚手架-嵌套路由）

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的入门学习，你应该在此基础之上，尝试设计更多 不同的页面，并逐步细化，以发现更多的不足并解决它们，从而提升前端工程 的开发能力。

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