时间:2021-05-26
实现效果图
1、项目中的图标使用的是element-ui框架中的图标,如果需要引入可以看我写的上一篇文章。
2、首先配置路由
我初始化项目的时候初始化了路由,所以打开router/index.js文件进行修改配置
router/index.js
Vue.use(Router)
export default new Router({ mode: 'history', linkActiveClass: 'active', routes: [ { path: '/', redirect: '/home' }, // 重定向到 home { path: '/home', name: 'Home', component: Home, // children path中"/home/"可以省略 children: [ { path: '/', // 子路由重定向 redirect: 'recommend' }, { path: 'recommend', name: 'recommend', component: Recommend }, { path: 'nba', name: 'nba', component: Nba }, { path: 'video', name: 'video', component: Nba }, { path: 'entertain', name: 'entertain', component: Nba } ] }, { path: '/game', name: 'Game', component: Game }, { path: '/bbs', name: 'Bbs', component: Bbs }, { path: '/me', name: 'Me', component: Me } ]})app.vue
底部导航封装为TabBar组件,在app.vue中引入
<template> <div id="app"> <div :class="{router: true}"> <router-view/> </div> <!-- 底部导航组件 --> <div :class="{tabbar: true}"> <tab-bar></tab-bar> </div> </div></template><script>import TabBar from './components/Tabs'export default { name: 'App', components: { // 底部导航组件 TabBar }}</script><style scoped> #app { width: 100%; height: 100%; display: flex; flex-direction: column; } .router { flex: 1; padding: 10pt; } .tabbar { height: 30pt; padding: 10pt 0; border-top: 1pt solid #e6e6e6; background: #fbfbfb; }</style>Tabs.vue
这样就添加了底部导航,然后我们配置home界面,home界面中有二级导航,而且在首页的二级导航选中的时候,需要高亮显示”首页“tab页
Home.vue
<template> <div id="home"> <div :class="{topbar: true}"> <router-link :to="{name: 'recommend'}" tag="div">推荐</router-link> <router-link :to="{name: 'nba'}" tag="div">篮球(NBA)</router-link> <router-link :to="{name: 'video'}" tag="div">视频</router-link> <router-link :to="{name: 'entertain'}" tag="div">影视娱乐</router-link> </div> <div :class="{tabInfo: true}"> <router-view/> </div> </div></template><script>export default { name: 'Home', data () { return { name: 'home' } }}</script><style scoped> #home { display: flex; flex-direction: column; text-align: left; height: 100%; } .topbar { height: 26pt; font-size: 12pt; color: #343434; background: #fbfbfb; border-bottom: 1pt solid #e6e6e6; margin-bottom: 10pt; display: flex; flex-direction: row; } .topbar div { margin: 0 5pt; } .topbar span { padding-bottom: 11pt; } .active { color: #468dcc; border-bottom: 1pt solid #468dcc; font-weight: bold; } .tabInfo { flex: 1; }</style>总结
以上所述是小编给大家介绍的vue2 中二级路由 高亮问题及配置方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
项目当中使用vue的时候一定会用到路由,并且二级路由甚至三集路由的需求都是刚需,当然,多级路由的配置方法和二级的是一样的,简单讲讲二级路由的配置吧。首先把一级路
第一层路由我写在app.vue里面。如图所示:footer.vue:二级路由是这样:index.js里面的配置:效果图:效果出来了,又出现新的问题,就是点击二级
本文实例讲述了vue2嵌套路由实现方法。分享给大家供大家参考,具体如下:前面讲过了vue2路由基本用法,一般应用中的路由方式不会像上述例子那么简单,往往会出现二
本文实例为大家分享了vuerouter2.0二级路由的具体代码,供大家参考,具体内容如下1、app.vue中2、router中index.js(路由的路径配置)
在一个单页面应用里使用二级套嵌路由目录结构如下:其中main.js为全局配置文件,App.vue为项目入口。main.js中路由配置如下importVuefro