vue router-view的嵌套显示实现
作者:ken_Rin 时间:2024-05-02 16:36:20
目录
一、路由配置
二、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
},
]
},
二、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,那么下级页面将无法显示
来源:https://blog.csdn.net/ken11253/article/details/119223490
标签:vue,router-view,嵌套
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Pandas读取行列数据最全方法
2022-06-23 09:34:22
Python实现的读取文件内容并写入其他文件操作示例
2021-10-11 02:27:02
![](https://img.aspxhome.com/file/2023/4/72974_0s.png)
VS 2008的性能改进
2007-10-07 21:42:00
Python ArcPy实现批量计算多时相遥感影像的各项元平均值
2022-06-04 14:45:51
![](https://img.aspxhome.com/file/2023/5/80755_0s.png)
浅谈MySQL存储引擎选择 InnoDB还是MyISAM
2009-05-10 20:02:00
带你轻松接触MaxDB和MySQL之间的协同性
2008-12-03 17:10:00
Mysql Workbench查询mysql数据库方法
2024-01-27 19:18:54
![](https://img.aspxhome.com/file/2023/5/93045_0s.jpg)
django echarts饼图数据动态加载的实例
2023-02-13 21:12:43
![](https://img.aspxhome.com/file/2023/0/133450_0s.jpg)
pycharm下pyqt4安装及环境配置的教程
2021-11-01 16:03:57
![](https://img.aspxhome.com/file/2023/3/135393_0s.png)
django框架创建应用操作示例
2022-07-15 22:07:33
Python字典“键”和“值”的排序5种方法
2022-01-13 04:45:42
![](https://img.aspxhome.com/file/2023/7/127077_0s.png)
Go语言包和包管理详解
2023-07-21 15:51:03
Mysql中explain作用详解
2024-01-28 11:40:46
CSS3属性box-shadow图层阴影效果使用教程
2010-05-16 14:54:00
![](https://img.aspxhome.com/file/UploadPic/20105/16/01-89s.jpg)
Python单例模式实例分析
2023-11-26 03:22:52
如何用python 实现老板键功能
2022-09-30 10:13:25
![](https://img.aspxhome.com/file/2023/6/120276_0s.png)
CentOS 7.2 Yum编译安装MySQL 5.6
2024-01-19 06:03:18
python中uuid模块实例浅析
2022-06-16 01:01:24
微信小程序实现登录注册tab切换效果
2024-04-29 13:11:29
![](https://img.aspxhome.com/file/2023/1/132861_0s.jpg)
MySQL的Query Cache图文详解
2024-01-28 01:18:42
![](https://img.aspxhome.com/file/2023/4/126254_0s.png)