|
一、路由配置const routes = [ { path: '/', name: '导航1', component: Home, children:[ { path: '/customer', name: 'Customer', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/Customer.vue') }, { path: '/pageOne', name: '页面1', component: PageOne, }, { path: '/pageTwo', name: '页面2', component: PageTwo, }, ] }, { path: '/navigation', name: '导航2', component: Home, children:[ { path: '/pageThree', name: '页面3', component: PageThree, }, { path: '/pageFour', name: '页面4', component: PageFour }, ] },
二、vue页面嵌套
App.vue先配置第一个router-view // An highlighted block <router-view></router-view> Home.vue配置第二个router-view // An highlighted block<template> <div> <el-container style="height: 500px; border: 1px solid #eee"> <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> <el-menu> <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''"> <template slot="title"><i class="el-icon-sell"></i>{{item.name}}</template> <el-menu-item v-for="(item2,index2) in item.children" :index="index+'-'+index2">{{item2.name}}</el-menu-item> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <i class="el-icon-setting" style="margin-right: 15px"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>查看</el-dropdown-item> <el-dropdown-item>新增</el-dropdown-item> <el-dropdown-item>删除</el-dropdown-item> </el-dropdown-menu> </el-dropdown> <span>王小虎</span> </el-header> <el-main> <router-view></router-view> </el-main> </el-container> </el-container></div></template><style>.el-header { background-color: #B3C0D1; color: #333; line-height: 60px;}.el-aside { color: #333;}</style><script>export default {};</script>
三、嵌套联系
首先，在访问http://localhost:8181/时会进入第一层嵌套，此时进入第一个router-view：Home.vue。然后当访问pageone时，会连带Home.vue继续访问。
因为router-view的嵌套显示和路由路基的嵌套有关，可以看到，在路由里面，导航一的路径底下分别是页面一以及页面二的路由路径。所以当访问页面一pageone时，会先访问上级路径Home.vue页面。加入Home.vue页面没有放置router-view，那么下级页面将无法显示
到此这篇关于vue router-view的嵌套显示实现的文章就介绍到这了,更多相关vue router-view嵌套显示内容请搜索wanshiok.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持wanshiok.com！
Vue组件封装上传图片和视频的示例代码
关于React状态管理的三个规则总结 |
