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

前端  /  管理员 发布于 4年前   337

实现效果图

 

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

您可能感兴趣的文章:

• Vue路由模块化配置的完整步骤
• 使用vue-router为每个路由配置各自的title
• vue router 配置路由的方法
• vue动态路由配置及路由传参的方式
• 深入理解vue2.0路由如何配置问题
• 在vue-cli脚手架中配置一个vue-router前端路由
• 详解vue2路由vue-router配置（懒加载）
• vue新建项目并配置标准路由过程解析