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 相关文章推荐
由浅到深了解JavaScript类
Sep 08 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
Javascript中的相等与不等运算
Apr 25 Javascript
读jQuery之九 一些瑕疵说明
Jun 21 Javascript
jquery 笔记 事件
Nov 02 Javascript
jQuery操作iframe中js函数的方法小结
Jul 06 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
vue中上传视频或图片或图片和文字一起到后端的解决方法
Dec 01 Javascript
微信小程序点击item使之滚动到屏幕中间位置
Mar 25 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
印尼林东PWN黄金曼特宁咖啡豆:怎么冲世界上最醇厚的咖啡冲煮教程
2021/03/03 冲泡冲煮
浅析PHP substr,mb_substr以及mb_strcut的区别和用法
2013/06/21 PHP
PHP 获取文件权限函数介绍
2013/07/11 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
javascript解析json实例详解
2014/11/05 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
js基础之事件捕获与冒泡原理
2019/10/09 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
python str与repr的区别
2013/03/23 Python
Python实现随机选择元素功能
2017/09/14 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
django最快程序开发流程详解
2019/07/19 Python
pandas 对日期类型数据的处理方法详解
2019/08/08 Python
利用python实现汉字转拼音的2种方法
2019/08/12 Python
Python socket 套接字实现通信详解
2019/08/27 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
pytorch masked_fill报错的解决
2020/02/18 Python
Keras 在fit_generator训练方式中加入图像random_crop操作
2020/07/03 Python
python进度条显示之tqmd模块
2020/08/22 Python
Python二元算术运算常用方法解析
2020/09/15 Python
幼儿园新学期寄语
2014/01/18 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
市场营销专业求职信
2014/06/17 职场文书
小学家长学校培训材料
2014/08/24 职场文书
社会发展项目建议书
2014/08/25 职场文书
乡镇机关党员民主评议表自我评价
2014/09/21 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
Python入门之基础语法详解
2021/05/11 Python
Python下载商品数据并连接数据库且保存数据
2022/03/31 Python