vue子路由跳转实现选项卡

目前很多后台管理系统都采用选项卡式布局，左侧固定导航栏，右侧对应页面。每次点击左边的导航标题，只有右边对应的页面会再次切换，而vue需要做tab，所以建议使用router-link/router-link来实现A标签的效果，然后使用router-view/router-view来实现槽的效果，再‘插’对应的页面。

1.这是选项卡页面，因此将不讨论布局。它主要是router-link : to=' a . URL ' : key=' index ' v-for='(a，index)在数据' {a.title}}/router-link中，to指向你要跳转的路径，这是关键

模板div class=' index-box' navh1导航/h1！-所有导航标题，路由和跳转到-router-link : to=' a . URL ' : key=' index ' v-for='(a，index)在数据' { a . title } }/router-link/nav div class=' content '！-路由槽：路由跳转的位置-路由器-视图/路由器-视图/div/div/模板脚本从'导入导航数据././static/data/nav ' export default { name : ' index '，data(){ return { Data:[] } }，methods:{ init(){ this。data=nav data . nav data；} }，created(){ this . init()；} }/脚本样式范围为/*容器*/。索引框{ width : 100%；高度： 100%；背景技术： # 212224；display: flex}/*左侧导航栏*/nav { width : 260 px；高度： 100%；背景： # 323437；飞越：隐藏；向左浮动：}/*导航*/nav h1 { color : # F2 ffff；margin: 10px 0 10px 10px}/*导航标题*/nav a { display : block；宽度： 100%；高度： 45px；color: # f2ffff背景技术# 2e3033padding-left : 10px；线高： 45px；font-size : 20px；边距-bottom : 10px；}/*右侧内容*/。内容{ flex : 1；padding: 20px}/style2，路由配置

在这种情况下，默认情况下显示我的选项卡的页面，因此我将此页面配置的子路由用于其他子页面

如果有其他要求，请在必要时配置子路由

从“vue”导入vue从“vue-router”/主页导入选项卡导入路由器从”./pages/Tab//page one import page one from './pages/Page one '/Page 2从导入Page 2 './pages/page two/./pages/page three' vue.use(路由器)；导出默认新路由器({ route :[ {//默认页面路径：'/'，名称3360 '选项卡'，组件3360选项卡，子组件：[{//页面路径： ' '，名称： '页面一'，组件：页面一}，{path: '页面二'，名称： '页面二'，组件：页面二}，{path: '页面三'，名称：

从“vue”导入vue从“vue-router”/导入hello world从“@/components/hello world”/home frame导入Index从”导入路由器./pages/Index '；//主页导入函数索引自'./组件/功能/功能索引'；//数据源列表导入函数“来源于”./components/functions/functions db source//role management从导入函数role management./components/functions/functions role management//log in从导入登录./pages/login' vue.use(路由器)；导出默认的新路由器({linkexact class :' act '、模式：' history '、路由：[{//主页路径：'/index '、名称：' index '、组件：索引、子项：[{//统计页面路径： ' '、名称：' total '、组件：函数索引}、{path:' dbsource '默认显示在主页中。name: 'DbSource '，component : functions sdb source }，{ path: 'RoleManagement '，name: 'RoleManagement '，component : functions srolemanagement }]}，//默认显示登录页面{path:'/'，name:' login '，component: login}]}。3.配置json文件。

因为侧边栏中的导航标题在每个系统中都不一样，也不能保证以后不会添加，所以我建议调出导航标题。然后，只需v-for loops router-link(循环具体操作，返回到上面的第一个代码块)，然后在标签页中引入json，将其分配给vue方法中数据中的变量，创建后调用该方法，然后在json中添加导航标题。

{'navData':[ {'title': '子页面一'，' url':'/' }，{'title': '子页面二'，' url':'/'页面二' }，{'title':

模板h1这是子页面1，默认情况下显示/h1/模板脚本导出默认值{ name : ' page one ' }/脚本样式范围为h1 { color: # f2ffff}/样式渲染：

如上所述，默认添加另一个登录页面，成功登录后在首页显示tab选项卡的效果图。由于数据库没有打开，我就模拟演示一下，手动登录成功进入首页：

好了，这就完成了一个简单的选项卡布局。让我们试试。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。