vue子视图里再加routerview(vue router-view的嵌套显示实现)
类别:编程学习 浏览量:1981
时间:2021-10-08 00:50:38 vue子视图里再加routerview
vue router-view的嵌套显示实现目录
- 一、路由配置
- 二、vue页面嵌套
- 三、嵌套联系
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 }, ] },
App.vue先配置第一个router-view
// An highlighted block <router-view></router-view>
Home.vue配置第二个router-view
// An highlighted block <template> <li> <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> </li> </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嵌套显示内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vueelementui左侧菜单(Vue Element前端应用开发之动态菜单和路由的关联处理)
- vue实现展开动画(Vue组件实现旋转木马动画)
- vuekeep-alive源码(vue中keepAlive组件的作用和使用方法详解)
- vue中router的具体用法(vue-router中hash模式与history模式的区别)
- vue 网页打印(vue打印功能实现的两种方法总结)
- vue怎么配置到idea(idea编译器vue缩进报错问题场景分析)
- vue element 权限管理(Vue Element前端应用开发之功能点管理及权限控制)
- vue前端搜索功能如何实现(使用Vue3+Vant组件实现App搜索历史记录功能示例代码)
- vue 计算一段时间的月份和天数(vue实现指定日期之间的倒计时)
- vue指令使用技巧(Vue指令工作原理实现方法)
- vue编程加入购物车(vuex实现简单的购物车功能)
- vue使用elementui框架(总结Vue Element UI使用中遇到的问题)
- vue怎么在中间加图片(Vue实现多图添加显示和删除)
- vuejs过滤器使用教程(vue3删除过滤器的原因)
- vue3 兄弟组件(vue3如何按需加载第三方组件库详解)
- vue怎么操作表格(如何在在Vue3中使用markdown 编辑器组件)
- 《小敏家》金波想要复婚 这只是他圈套的第1步,更可恶的在后面(小敏家金波想要复婚)
- 小敏家 剧情离谱一锅乱炖,但他们俩绝对是这部剧的一大 亮点(剧情离谱一锅乱炖)
- 《倚天屠龙记》再遭翻拍,关晓彤主演赵敏,蒋劲夫演张无忌,你怎么看(倚天屠龙记再遭翻拍)
- 吴启华与曾舜晞两代张无忌同框,戏里经典的他却没活出原著的潇洒(吴启华与曾舜晞两代张无忌同框)
- 经常发这三种 朋友圈 的人,要迅速屏蔽(经常发这三种朋友圈)
- 有种尴尬叫朋友圈忘屏蔽,大学生上演社死现场,父母亲自下场吐槽(有种尴尬叫朋友圈忘屏蔽)
热门推荐
- mysql的count知识(MySQL中MTR的概念)
- NoSQL的优缺点
- pythonmatplotlib实例(Python3使用Matplotlib 绘制精美的数学函数图形)
- laravel框架两表联查(Laravel 使用查询构造器配合原生sql语句查询的例子)
- sqlserver安装与使用教程(SQL Server 2017 Developer的下载、安装、配置及SSMS的下载安装配置图文教程详解)
- 云服务器的安全问题(云服务器如何提高安全组性能?)
- dedecms怎么改使用页面(dedecms从子目录移动到根目录的方法)
- linuxudp通信程序(linux对于UDP的学习)
- php测试服务器ftp地址(PHP获取远程http或ftp文件的md5值的方法)
- uniapp使用vue写页面(分析uniapp入门之nvue爬坑记)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9