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嵌套显示内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue虚拟dom如何转换成真实dom的(vue中对虚拟dom的理解知识点总结)
- django框架教程第100讲(详解Django+Vue+Docker搭建接口测试平台实战)
- vue改数组和对象值(vue $set 实现给数组集合对象赋值)
- vue购物车简单项目(vue实现简单购物车案例)
- vue获取图片并展示(vue卡片式点击切换图片组件使用详解)
- vue组件方法里如何修改data(vue项目中使用rem替换px的实现示例)
- vue全局配置文件env(vue项目多环境配置.env的实现)
- vue组件开发步骤(解析如何自动化生成vue组件文档)
- vue多个对象实现双向数据绑定(利用js实现Vue2.0中数据的双向绑定功能)
- vue虚拟滚动条(vue轻松实现虚拟滚动的示例代码)
- vue 为什么要使用key(详解vue中v-for的key唯一性)
- vuevlog制作软件(Vue实现Dialog封装)
- vue官网编辑器主题(vue实现主题切换的多种思路分享)
- vue3和vue2(Vue3对比Vue2的优点总结)
- vue加element ui开发项目(Vue+ElementUI之Tree的使用方法)
- vuetable表格合并(vue-table实现添加和删除)
- 中国有几个名族(中国有几个民族没列入56个民族)
- 数学语文题目(语文的数学题)
- 香蕉(香蕉三种人不宜吃)
- 没钱可以快乐吗(没钱也能快乐吗)
- 快乐是什么(快乐就是)
- 东南亚有哪个国家(东南亚有哪个国家最发达)