vue2 中二级路由高亮问题及配置方法


Posted in Javascript onJune 10, 2019

实现效果图

vue2 中二级路由高亮问题及配置方法 

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 中二级路由 高亮问题及配置方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
捕获关闭窗口的脚本
Jan 10 Javascript
异步加载script的代码
Jan 12 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
js中string和number类型互转换技巧(分享)
Nov 28 Javascript
解析如何利用iframe标签以及js制作时钟
Dec 08 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
vue中子组件调用兄弟组件方法
Jul 06 Javascript
npm qs模块使用详解
Feb 07 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 #Javascript
vuex 中插件的编写案例解析
Jun 10 #Javascript
使用webpack搭建vue项目及注意事项
Jun 10 #Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 #Javascript
前端路由&amp;webpack基础配置详解
Jun 10 #Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 #Javascript
vue中使用 pako.js 解密 gzip加密字符串的方法
Jun 10 #Javascript
You might like
德生PL330测评
2021/03/02 无线电
php切割页面div内容的实现代码分享
2012/07/31 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
php使用正则表达式进行字符串搜索的方法
2015/03/23 PHP
详解PHP对数组的定义以及数组的创建方法
2015/11/27 PHP
基于Jquery插件开发之图片放大镜效果(仿淘宝)
2011/11/19 Javascript
深入理解JavaScript系列(13) This? Yes,this!
2012/01/18 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
vue动态删除从数据库倒入列表的某一条方法
2018/09/29 Javascript
nodejs 使用 js 模块的方法实例详解
2018/12/04 NodeJs
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
彻底搞懂Python字符编码
2018/01/23 Python
windows环境下tensorflow安装过程详解
2018/03/30 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
tensorflow实现加载mnist数据集
2018/09/08 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
关于tf.nn.dynamic_rnn返回值详解
2020/01/20 Python
解决django FileFIELD的编码问题
2020/03/30 Python
Python数组拼接np.concatenate实现过程
2020/04/18 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
意大利奢侈品多品牌集合店:TheDoubleF
2019/08/24 全球购物
合作意向书范本
2014/03/31 职场文书
护士工作失误检讨书
2014/09/14 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技
Android 界面一键变灰 深色主题工具类
2022/04/28 Java/Android