使用vue路由相关知识动手实现tab栏切换案例,
这篇文章主要为大家详细介绍了某视频剪辑软件子路由跳转实现标签选项卡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
标签选项卡的布局在项目中是很常见的，在后台管理系统中左边是导航栏固定，右边是对应的页面，每次点击左边的标题，只有右面的对应页面在切换，而某视频剪辑软件要做标签选项卡，推荐使用实现a标签的效果，然后使用实现插槽的效果，把对应的页面"塞"进去，具体实现看下面的案例：
某视频剪辑软件文件
模板
div class=box
！-导航标题，路由指向-
div class=left
路由器链接：to= item。导航数据中的src v-for=(item，index ):key= index { item。title } }/路由器链接
/div
div class=右
！-路由跳转的位置-
路由器视图/路由器视图
/div
/div
/模板
脚本
导出默认值{
名称："索引",
data(){
返回{
navData:[
{
标题：标题一，
src:“/”
},
{
标题：标题二，
src:"/nav 2 "
},
{
标题：标题三，
src:"/nav 3 "
}
]
}
}
}
/脚本
样式范围。方框{
宽度：100%;
身高：100%;
显示器：flex
背景：rgba(0，0，0，8)
}。左侧{
宽度：200像素
身高：100%;
文本对齐：居中；
背景：rgba(0，0，0，4);
填充：20px
}。左一个{
文字-装饰：无；
显示：块；
边距-顶部：20px
宽度：100%;
颜色：# fff
}。右{
flex:1；
填充：20px
颜色：# fff
}
/风格
router.js
从“vue”导入某视频剪辑软件
从“vue路由器"导入路由器
从导入索引 views/Index.vue
从导入导航1 ./components/Index/nav1.vue
从导入导航2 ./components/Index/nav2.vue
从导入导航3 ./components/Index/nav3.vue
Vue.use(路由器)
导出默认新路由器({
//去掉#
模式："历史",
base: process.env.BASE_URL，
路线：[
{
路径："/",
//名称：索引，
组件：索引，
儿童：[
{
路径：,
名称： nav1 ，
组件：nav1
},
{
路径：“nav2”，
名称： nav2 ，
组件：nav2
},
{
路径：“nav3”，
名称： nav3 ，
组件：nav3
}
]
}
]
})
注意：当在router.js中的路线中写上名称："索引",时在控制台会有下面的警告，所以可以删掉此句。
右边要显示页面的内容
！- nav1.vue -
模板
差异
这是nav1
/div
/模板
！- nav2.vue -
模板
差异
这是nav2
/div
/模板
！- nav3.vue -
模板
差异
这是nav3
/div
/模板
效果图
简单的子路由跳转实现标签选项卡效果就实现啦
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。