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

(0)

相关推荐

  • vue router2.0二级路由的简单使用

    本文实例为大家分享了vue router2.0二级路由的具体代码,供大家参考,具体内容如下 1.app.vue中 <template> <div id="app"> <router-view></router-view> </div> </template> 2.router中index.js(路由的路径配置) import Vue from 'vue' import Router from 'vue-router

  • vue二级路由设置方法

    项目当中使用vue的时候一定会用到路由,并且二级路由甚至三集路由的需求都是刚需,当然,多级路由的配置方法和二级的是一样的,简单讲讲二级路由的配置吧. 首先把一级路由的结构准备好: <router-link to="/discover"> <div @click="clickFind('发现')"> <span class="icon-find"></span> <p>发现</p&g

  • 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'

  • 浅谈vue 二级路由嵌套和二级路由高亮问题

    第一层路由我写在app.vue里面.如图所示: footer.vue: 二级路由是这样: index.js里面的配置: 效果图: 效果出来了,又出现新的问题,就是点击二级路由的时候,默认的二级路由高亮不会去掉,如图所示: 在网上看到别人用exact方法,即在默认的二级路由里面加上exact,如图所示: 补充知识:vue - 子路由-路由嵌套 描述:子路由,也叫路由嵌套,采用在children后跟路由数组来实现,数组里和其他配置路由基本相同,需要配置path和component,然后在相应部分添加

  • VMware虚拟机中Centos8的桥接静态IP配置方法

    一.要保证网络连接方式是桥接 要选中复制物理网络连接状态 二.编辑网卡文件 vim /etc/sysconfig/network-scripts/ifcfg-ens160 最后的ifcfg-ens160 是我的网卡文件,具体咋找网卡文件网上一大堆就不说了 网卡文件内容 TYPE=Ethernet PROXY_METHOD=none BROWSER_ONLY=no BOOTPROTO=static # 这里原来是dhcp 改成现在的static DEFROUTE=yes IPV4_FAILURE_

  • vue项目中进行svg组件封装及配置方法步骤

    最近刚入新的公司,拿到项目之后,发现一个有趣的事情就是标题的icon是用svg来弄的,这篇文章彻底弄清楚怎么使用 1.创建vue项目(通过cli来搭建脚手架,该测试项目是用vue cli4进行配置的) 2.创建一个自定义组件 具体代码如下: <template> <svg :class="svgClass" aria-hidden="true" v-on="$listeners"> <use :xlink:href=

  • 在Vue2中注册全局组件的两种方法详解

    第一种:在main.js中直接注册 //引入 import FixedTop from '@/components/FixedTop //注册为全局组件 Vue.componet('FixedTop',FixedTop) //页面直接使用 <FixedTop /> 缺点:如果我们需要注册的全局组件非常多,那么需要一个一个引入,然后分别调用Vue.componet方法,main.js文件会变得很大很臃肿,不好维护,所以当需要注册的全局组件非常多的时候可以采用插件的形式注册 第二种:使用插件的形式

  • ASP.NET web.config中数据库连接字符串connectionStrings节的配置方法

    在ASP.NET开发的网站根目录,有一个名为web.config的文件,顾名思义,这是为整个网站进行配置的文件,其格式为XML格式.这里主要谈谈文件中的<connectionStrings>节. <connectionStrings>节是对连接到数据库的字符串进行配置,由于MS SQL Server与ASP.NET同属于微软的产品,因此是使用ASP.NET开发时首选的数据库是MS SQL Server,本文只讨论对MS SQL Server的连接字符串情况.第一种情况,本地开发时,

  • nginx中文件下载指定保存文件名的配置方法

    一般在我们上传完资源文件之后,为了避免文件名冲突,会将文件名改成毫无意义的一段字符.这个字符,可能是MD5产生的,或者是其他方式产生的字符串.这时候,下载的时候,默认保存的文件名会是这段毫无意义的文件名(图1). 其实,nginx是支持下载时重命名的,让文件名更加友好. nginx也很容易配置:只要加入以下几行即可: 复制代码 代码如下: location ~* .*\.(doc|txt|jar|zip|apk)(\?.*)?$ {         if ($request_uri ~* ^.*

  • win2003 vps IIS6中添加站点并绑定域名的配置方法

    本设置过程操作系统为中文版本的Windows 2003 Enterprise Server. 1.  在IIS网站中右击新 建-网站 2.  点击-下一步 3.   为网站命名,此处是网站的描述方便区分不同站点,如: 4.   选择网站IP(通常不用改变),端口为80,如果有需要可以更改为其他端口但访问时网页地址将变成http://mail.XXX.com:端口(修改的端口) 网站主机头请填写你的网站访问时要用的网址:比如你要用mail.XXX.com访问则此处就是mail.XXX.com 5.

  • Tomcat7中开启gzip压缩功能的配置方法

    使用gzip压缩可以减少数据传输大小,加快网页加载速度.很多大站都开启了gzip压缩,不过也有很多网站并没有开启gzip压缩,上次看了一篇文章说开启gzip压缩后对搜索引擎不友好,但从带宽和流量的角度来看,还是有必要开启gzip压缩的. 对于tomcat7服务器,打开conf文件夹下的server.xml 文件,找到 复制代码 代码如下: <Connector port="8080" protocol="HTTP/1.1"                   

  • Angular2之二级路由详解

    写了一阵子的Angular 2 现在还是觉得更喜欢Angular 1的版本. 1的版本更多的是整合,按照模块来区分,并没有做更细的划分,而2的版本中,在创建时模块组件时就已经有了很好的区分,每个模块单独管理各自的组件,在组件中也是各自管理自己的样式,效果. 在以往1的版本中,要整合路由是十分容易的,无论是一级或者二级路由都可以写在一个文件中 但是在2中则是将路由写在上层模块中,一般app为主模块,定义一个app-routing.module.ts的主路由. 基本的Angular 2 入门在前面一

随机推荐