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'

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 } ]})

<template> <div id="app"> <div :class="{router: true}">  <router-view/> </div> <!-- 底部導(dǎo)航組件 --> <div :class="{tabbar: true}">  <tab-bar></tab-bar> </div> </div></template><script>import TabBar from './components/Tabs'export default { name: 'App', components: { // 底部導(dǎo)航組件 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>

<template> <div id="tabs"> <div class="home">  <!-- 點(diǎn)擊其他tab頁，再次點(diǎn)擊home的時(shí)候，路由重定向到了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>社區(qū)</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>

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