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 相关文章推荐
JQuery 学习笔记 选择器之六
Jul 23 Javascript
javascript+iframe 实现无刷新载入整页的代码
Mar 17 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
JS实现简单的二维矩阵乘积运算
Jan 26 Javascript
JS动态插入并立即执行回调函数的方法
Apr 21 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 Javascript
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
Js通过AES加密后PHP用Openssl解密的方法
Jul 12 Javascript
html中两种获取标签内的值的方法
Jun 16 jQuery
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
PHP 工厂模式使用方法
2010/05/18 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
js jquery数组介绍
2012/07/15 Javascript
javascript加号&quot;+&quot;的二义性说明
2013/03/04 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
JavaScript中的Math 使用介绍
2014/04/21 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
jQuery多级联动下拉插件chained用法示例
2016/08/20 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
angular实现spa单页面应用实例
2017/07/10 Javascript
基于JS递归函数细化认识及实用实例(推荐)
2017/08/07 Javascript
详解动画插件wow.js的使用方法
2017/09/13 Javascript
详解vue-cli 接口代理配置
2017/12/13 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
微信小程序使用wxParse解析html的方法示例
2019/01/17 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
Python格式化css文件的方法
2015/03/10 Python
用python写一个windows下的定时关机脚本(推荐)
2017/03/21 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
sklearn+python:线性回归案例
2020/02/24 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
全球知名旅游社区法国站点:TripAdvisor法国
2016/08/03 全球购物
公务员保密承诺书
2014/03/27 职场文书
个人承诺书格式
2014/06/03 职场文书
感情真挚的毕业生求职信
2014/07/19 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
个人自查自纠材料
2014/10/14 职场文书
歌舞青春观后感
2015/06/10 职场文书
学生会部长竞选稿
2015/11/19 职场文书
QT与javascript交互数据的实现
2021/05/26 Javascript
Windows server 2016服务器基本设置
2022/08/14 Servers