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 相关文章推荐
原生js做的手风琴效果的导航菜单
Nov 08 Javascript
JavaScript实现添加、查找、删除元素
Jul 02 Javascript
jQuery插件pagination实现无刷新分页
May 21 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
基于javascript的异步编程实例详解
Apr 10 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
React中jquery引用的实现方法
Sep 12 jQuery
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 Javascript
js实现搜索栏效果
Nov 16 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
vue实现移动端input上传视频、音频
Aug 18 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
espresso double下 咖啡粉超细时 饼压力对咖啡的影响
2021/03/03 冲泡冲煮
同时提取多条新闻中的文本一例
2006/10/09 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
利用PHP如何写APP接口详解
2016/08/23 PHP
javascript 获取url参数和script标签中获取url参数函数代码
2010/01/22 Javascript
js中的this关键字详解
2013/09/25 Javascript
与Math.pow 相反的函数使用介绍
2014/08/04 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
浅谈jQuery的offset()方法及示例分享
2015/07/17 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
整理关于Bootstrap导航的慕课笔记
2017/03/29 Javascript
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
使用vue-cli编写vue插件的方法
2018/02/26 Javascript
JavaScript 隐性类型转换步骤浅析
2018/03/15 Javascript
jQuery实现获取当前鼠标位置并输出功能示例
2019/01/05 jQuery
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
JavaScript实现简单的弹窗效果
2020/05/19 Javascript
[38:54]完美世界DOTA2联赛PWL S2 Rebirth vs LBZS 第一场 11.28
2020/12/01 DOTA
python学生管理系统代码实现
2020/04/05 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
python实现图像拼接
2020/03/05 Python
基于HTML5 audio元素播放声音jQuery小插件
2011/05/11 HTML / CSS
工程师岗位职责规定
2014/02/26 职场文书
面试必备的求职信
2014/05/25 职场文书
职业生涯规划书怎么写?
2014/09/14 职场文书
《穷人》教学反思
2016/02/19 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
如何判断pytorch是否支持GPU加速
2021/06/01 Python
Python还能这么玩之用Python修改了班花的开机密码
2021/06/04 Python
python+opencv实现视频抽帧示例代码
2021/06/11 Python
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技