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

实现效果图

创新互联自2013年起，先为云溪等服务建站，云溪等地企业，进行企业商务咨询服务。为云溪企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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中引入

Tabs.vue

这样就添加了底部导航，然后我们配置home界面，home界面中有二级导航，而且在首页的二级导航选中的时候，需要高亮显示”首页“tab页

Home.vue

总结

以上所述是小编给大家介绍的vue2 中二级路由高亮问题及配置方法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

新闻名称：vue2中二级路由高亮问题及配置方法
文章URL：http://cqcxhl.cn/article/iegchs.html

重庆分公司，新征程启航

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

其他资讯