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嵌套显示内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vuex存取修改数据流程(vuex数据持久化的两种实现方案)
- vue滚动条下拉翻页(Vue中利用better-scroll组件实现横向滚动功能)
- vue导出动态的excel功能(vue中如何下载excel流文件及设置下载文件名)
- vue怎么定义router的动态路由(vue.js Router中嵌套路由的实用示例)
- vue 组件布局(Vue实现固定底部组件的示例)
- vue项目引入element页面(vue-element-admin项目导入和导出的实现)
- vue切换图片效果(Vue.js实现图片切换功能)
- vuejs指令解析(Vue.js中的计算属性、监视属性与生命周期详解)
- vue虚拟dom如何转换成真实dom的(vue中对虚拟dom的理解知识点总结)
- vue多个对象实现双向数据绑定(利用js实现Vue2.0中数据的双向绑定功能)
- vue滑动切换页面(vue实现点击翻转效果)
- vue 为什么使用虚拟dom(Vue虚拟Dom到真实Dom的转换)
- vue轮播图代码(vue实现无缝轮播效果跑马灯)
- vue组件开发步骤(解析如何自动化生成vue组件文档)
- vue3.0全家桶教程elementui学习(vite+vue3.0+ts+element-plus快速搭建项目的实现)
- vue表单上传图片数据(vue-cropper插件实现图片截取上传组件封装)
- 春节会放假几天(春节会放假吗)
- 小浴室,大民生 缙云3200多户困难群众洗上免费热水澡(小浴室大民生缙云3200多户困难群众洗上免费热水澡)
- 元旦闲谭(元旦闲谭)
- 息烽 这个村 治垃圾 有招 人人争当卫生模范(息烽这个村治垃圾)
- 今天要吃什么(今天要吃什么菜)
- 三杨之一 南杨 杨溥 安贞履节,酿醴调羹,宰相之气(三杨之一南杨杨溥)
热门推荐
- pandas删除特定条件的行(pandas删除指定行详解)
- js淘宝购物车效果代码(JavaScript实现电商平台商品细节图)
- sqlserver 查询锁(sqlserver:查询锁住sql以及解锁方法)
- win10下安装mysql8.0.23 及 “服务没有响应控制功能”问题解决办法(win10下安装mysql8.0.23 及 “服务没有响应控制功能”问题解决办法)
- vue3.0路线图(Vue3.0 自己实现放大镜效果案例讲解)
- html5长图拖动(html5 拖拽及用 js 实现拖拽功能的示例代码)
- idea的tomcat怎么关闭(解决Idea的tomcat启动报多个listener的错误问题)
- 无盘服务器配置要求(云服务器配置怎么选)
- python爬虫第一本书(我用Python抓取了7000 多本电子书案例详解)
- chrome适合开发的插件(Chrome插件扩展开发全攻略完整demo)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9