vue2 中二级路由高亮问题及配置方法
程序员文章站
2022-11-20 08:55:07
实现效果图
1、项目中的图标使用的是element-ui框架中的图标,如果需要引入可以看我写的上一篇文章。
2、首先配置路由
我初始化项目的时候初始化...
实现效果图
1、项目中的图标使用的是element-ui框架中的图标,如果需要引入可以看我写的上一篇文章。
2、首先配置路由
我初始化项目的时候初始化了路由,所以打开router/index.js
文件进行修改配置
router/index.js
import vue from 'vue' import router from 'vue-router' import home from '@/components/home' import game from '@/components/game' import bbs from '@/components/bbs' import me from '@/components/me' import nba from '@/components/nba' import recommend from '@/components/recommend'
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
<template> <div id="tabs"> <div class="home"> <!-- 点击其他tab页,再次点击home的时候,路由重定向到了recommend,注意写法 to="/home/" --> <router-link to="/home/" tag="div"> <div><i class="el-icon-s-home"></i></div> <div>首页</div> </router-link> </div> <div class="game"> <router-link :to="{name: 'game'}" tag="div"> <div><i class="el-icon-s-goods"></i></div> <div>比赛</div> </router-link> </div> <div class="bbs"> <router-link :to="{name: 'bbs'}" tag="div"> <div><i class="el-icon-share"></i></div> <div>社区</div> </router-link> </div> <div class="me"> <router-link :to="{name: 'me'}" tag="div"> <div><i class="el-icon-s-custom"></i></div> <div>我</div> </router-link> </div> </div> </template> <script> export default { name: 'tabbar' } </script> <style scoped> #tabs { width: 100%; display: flex; flex-direction: row; justify-content: space-around; align-items: center; text-align: center; color: #b5b5b5; } #tabs i { font-size: 18pt; } .active { color: #468dcc; } </style>
这样就添加了底部导航,然后我们配置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 中二级路由 高亮问题及配置方法,希望对大家有所帮助
上一篇: 西兰花炒鸡肉,荤素搭配好吃又减肥
下一篇: 孕妇可以吃大蒜吗,一起来了解一下