vue-router嵌套路由(vue脚手架路由配置)

vucli项目是一个单独的页面。为了保证各种页面都能显示，需要设计页面的整个区域，然后加载不同的视图组件(。vue文件)根据不同的网址。即使将整个页面的显示区域视为一个，多个页面之间仍可能存在一些共同部分，例如：
routerView
如果按照上面的样式设计，页面右侧最大的区域也必须是一个，这样就会形成最外面的部分(页面的所有部分)和里面的部分(右侧的大区域)。配置路由时，有必要使用嵌套路由。
如何使用嵌套路由
在router/index.js中，传统路由的配置大致如下：
const routes=[ { path: ‘/’，component: HomeView }，{ path: ‘/about ‘，component: ()=import(‘./views/about view . vue ‘)}]；对于嵌套路由，需要将子属性添加到原始路由的对象中。该属性仍然是一个数组，其内部配置与routes常量相同，例如：
const routes=[ { path: ‘/admin ‘，component: ()=import(‘./views/AdminView.vue ‘)、children :[{ path : ‘ user/list ‘、component: ()=import(‘./views/admin/user listview . vue ‘)}，{ path: ‘user/add-new ‘，component: ()=import(‘./views/admin/useraddnewview . vue ‘)}]}]；【提示】在上述子路径的配置中，如果/没有作为每个路径中的第一个字符，则表示添加到父路径中。例如，它被配置为user/list，因为父级是用/admin配置的，所以完整路径是/admin/user/list。
如果在访问嵌套的子视图时，希望打开一个子视图(例如上面的/admin/user/list对应的视图)，也可以在配置带有子视图的视图(例如上面的/admin对应的视图)时，添加redirect属性，将其直接重定向到子视图，例如：
Const routes=[//省略前导{path:’/admin ‘，redirect3360’/adminm/user/list ‘，component3360 ()=import(‘./views/adminview.vue ‘)、children 3360[//省略子代码。路由演示
需要修改的嵌套路由
//APP.vue文件
//route index.js从’ vue ‘导入vue从’ vue-router ‘导入vue路由器从’导入loginview ‘./views/LoginView . vue ‘ vue . use(vue路由器)constrouts=[{ path : ‘/’，Component : LoginView，Meta : {Title 3360 ‘用户登录’ }}，{Path3360’/admin ‘，Redirect3360’/admin/user/list ‘，component: ()=import(‘./views/AdminView.vue ‘)、children :[{ path : ‘ user/list ‘，///admin/user/listcomponent 3360()=import(‘./views/admin/userlistview.vue ‘)、meta 3360 {title 3360′ user list’}}、{path3360′ user/add-new ‘、///admin/user/add-new component :()=import(‘./views/admin/useraddnewview . vue ‘)、meta : { title : ‘ Add users ‘ } }]]constrator=new vue router({ Mode 3360 ‘ history ‘，base3360process.env.base _ URL，Routes})//功能是修改每条路由自己的名称router.beforeeach ((to，from，next)={ if(to . meta . title){ document . title=to . meta . title } next()})导出默认路由器//adminview.vue文件这是上半年用户管理增加的用户列表。
//admin文件夹//UserAddNewView.vue这是添加用户的页面。
//UserListView.vue这是用户列表页面。
总结
通过学习上述内容，您应该能够：
了解Vue CLI的单页设计思路掌握如何安装Node.js，配置npm源码，安装Vue CLI，创建Vue CLI项目，在Vue CLI项目中安装常用框架自己做一些笔记，记下相关命令和注意事项。而不是死记硬背——知道vue CLI的项目目录结构——掌握基本的开发。Vue视图组件(了解此类文件的结构和特点)——掌握Vue CLI中路由的配置，包括一般路由和嵌套路由——你可以从Element UI官网或相关网站找到你需要的(或类似的)页面设计。并加工成你需要的样子(千万不要背标签、属性等。但你要尽可能多地使用标签，了解它们的特性，并结合正式文档使用，这样才能积累经验——掌握用axios发送请求和处理响应的结果)。至此，您已经完成了Vue CLI的入门学习。你要在此基础上尝试设计更多不同的页面，并逐步细化，发现更多不足和学习记录，如有侵权，请联系删除。