vue router view,
本文主要介绍了某视频剪辑软件路由器-视图嵌套显示，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
目录
一、路由配置二、vue页面嵌套三、嵌套联系
一、路由配置
常量路由=[
{
路径："/",
名称： 导航1,
成分：家，
儿童：[
{
路径："/客户",
姓名：客户，
//路由级代码拆分
//这会生成一个单独的块（大约。[哈希]。js)用于此路线
//当访问路由时延迟加载。
component:()=import(/* webpackChunkName: about */./视图/客户。vue’)
},
{
路径："/pageOne "，
名称： 页面1,
组件：PageOne，
},
{
路径："/第二页",
名称： 页面2,
组件：第二页，
},
]
},
{
路径："/导航"，
名称： 导航2,
成分：家，
儿童：[
{
路径："/第三页",
名称： 页面3,
组件：第三页，
},
{
路径："/第四页",
名称： 页面4,
组件：第四页
},
]
},
二、vue页面嵌套
App.vue先配置第一个路由器视图
//突出显示的块
路由器视图/路由器视图
Home.vue配置第二个路由器视图
//突出显示的块
模板
差异
El-container style= height:500 px；边框：1px纯色#eee
El-aside width= 200 px style= background-color:RGB(238，241，246)
埃尔菜单
$router.options.routes中的埃尔-子菜单v-for=(item，index :index= index
模板slot= title I class= El-icon-sell /I { { item。名称} }/模板
el-menu-item v-for=(item2，index 2)in item。 children :index= index - index 2 { item 2。name } }/El-菜单项
/El-子菜单
/el-menu
/El-旁白
埃尔容器
El-header style= text-align:right；字体大小：12px
埃尔-下拉菜单
I class= El-icon-setting style= margin-right:15px /I
El-下拉菜单-菜单slot=dropdown
埃尔-下拉列表-项目查看/El-下拉列表项
埃尔-下拉列表-项目新增/El-下拉列表项
埃尔-下拉列表-项目删除/El-下拉列表项
/El-下拉菜单
/El-下拉列表
跨度王小虎/span
/el-header
埃尔梅因
路由器视图/路由器视图
/el-main
/El-容器
/El-容器
/div
/模板
风格。埃尔标题{
背景色：# B3C0D1
颜色：# 333;
行高：60px
}。El侧{
颜色：# 333;
}
/风格
脚本
导出默认值{
};
/脚本
三、嵌套联系
首先，在访问http://本地主机：8181/时会进入第一层嵌套，此时进入第一个路由器视图：Home.vue。然后当访问第一页时，会连带Home.vue继续访问。
因为路由器视图的嵌套显示和路由路基的嵌套有关，可以看到，在路由里面，导航一的路径底下分别是页面一以及页面二的路由路径。所以当访问页面一第一页时，会先访问上级路径Home.vue页面。加入Home.vue页面没有放置路由器视图，那么下级页面将无法显示
到此这篇关于某视频剪辑软件路由器-视图的嵌套显示实现的文章就介绍到这了，更多相关某视频剪辑软件路由器-视图嵌套显示内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。