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

路由传参

// this.$route.query 或者 this.$route.params

push append replace