实现效果图

1、项目中的图标使用的是元素用户界面框架中的图标，如果需要引入可以看我写的上一篇文章。

2、首先配置路由

我初始化项目的时候初始化了路由，所以打开路由器/索引。射流研究…文件进行修改配置

路由器/索引。射流研究…

从“vue”导入某视频剪辑软件从“vue路由器”导入路由器从"@"导入主页/组件/主页”从" @/组件/游戏"从" @/组件/Bbs "从" @/组件/我"从" @/组件/Nba "导入推荐自“@/组件/推荐”Vue。使用(路由器)

导出默认的新路由器({ mode: 'history '，linkActiveClass: 'active '，route :[{ path : '/'，redirect: '/home' }，//重定向到Home { path :/' Home '，name: 'Home '，component: Home，//子路径中/home/'可以省略children: [ { path: '/'，//子路由重定向redirect: 'recommend' }，{ path: 'recommend '，name: 'recommend '，component: Recommend '，{ path: 'nba '，name: 'nba '，{ path: 'video '，name: 'video '，component : ' Nba '，{ path 3: '娱乐，名称为： '娱乐，组件： Nba '

底部导航封装为标签栏组件，在app.vue中引入

模板div id=' app ' div : class=' { router : true } '路由器-视图//div！-底部导航组件-div : class=' { TabBar : true } ' tab-bar/tab-bar/div/div/templatescriptimport TabBar from ' ./组件/选项卡'导出默认{名称： '应用'，组件： { //底部导航组件TabBar }}/scriptstyle作用域为# app { width : 100%；高度： 100%;显示： flex flex-方向：柱；} .路由器{ flex : 1；padding: 10pt }。tab bar { height : 30 pt padd : 10pt 0；边框-顶部： 1磅实心# e6e6e6背景# fbfbfb }/样式选项卡。某视频剪辑软件

模板div id=' tabs ' div class=' home '！-点击其他标签页，再次点击家的时候，路由重定向到了推荐，注意写法to='/home/' -路由器-链接到='/home/'标记=' div ' divi class=' El-icon-s-home '/I/div首页/div/router-link/div class=' Game ' router-link : to=' { name : ' Game ' } ' tag=' div ' divi class=' El-icon-s-goods '/I/div比赛/div/router-link/div class=' BBs ' router-link : to=' { name : ' Bbs ' } 标签=' div ' divi class=' El-icon-share '/I/div社区/div/router-link/div class=' Me ' router-link : to=' { name : ' Me ' } ' tag=' div ' divi class=' El-icon-s-custom '/I/div我/div/router-link/div/div/template script导出默认{ name : ' TabBar ' }/脚本样式作用域# tab {宽度： 100%； display : flex flex-方向：行；证明内容：空间环绕；align-items:居中；文本对齐：中心；color: # b5b5b5} #选项卡I { font-size : 18pt} .活动{ color: # 468dcc}/样式这样就添加了底部导航，然后我们配置家界面，家界面中有二级导航，而且在首页的二级导航选中的时候，需要高亮显示"首页"标签页

Home.vue

模板div id=' home ' div : class=' { topbar : true } '路由器-链接：to='{name: '推荐' } '标记='div '推荐/router-link router-link : to=' { name : ' NBA ' } '标记='div '篮球(NBA)/路由器-链路路由器-链路：to='{name: 'video'} '标记='div '视频/router-link router-link :到=' { name : '娱乐' } '标记='div '影视娱乐/router-link/div : class=' { tabinfo : true } ' router-view//div/template script导出默认{ name : ' Home '，data(){ return { name : ' Home ' } } }/脚本样式作用域# home { display : flex flex-direction :柱；文本-左对齐：高度： 100%;} .topbar { height : 26pt font-size : 12pt；颜色： # 343434背景# fbfbfbborder-bottom: 1pt实心# e6e6e6保证金-底部： 10ptdisplay : flex flex-方向：行；} .topbar div { margin: 0 5pt}。顶栏跨度{填料-底部： 11pt} .活动{ color : # 468 dccborder-bottom : 1 pt实心# 468dccfont-weight:粗体；} .tabInfo { flex : 1；}/样式总结

以上所述是小编给大家介绍的vue2中二级路由高亮问题及配置方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！