main.js

// main.js
// 1.1  導入路由的包
import VueRouter from 'vue-router'// 1.2 安裝路由
Vue.use(VuerRouter)// 1.3 導入自己的router.js模塊
import router from './router.js'// 1.4 掛載router對象在vm實例上
const vm = new Vue({el: '#app',router
})

app.vue

• 原本的 a 標簽需改為 router-link.
• href屬性需改為to

// (原生)栗子
< a class="mui-tab-item mui-active" href="#tabbar"><span class="mui-icon mui-icon-home"></span><span class="mui-tab-label">首頁</span>
</a>// (使用vue-router之后的熟)栗子
<router-link class="mui-tab-item mui-active" to="/home"><span class="mui-icon mui-icon-home"></span><span class="mui-tab-label">首頁</span>
</router-link>

配置路由激活樣式(高亮類).

// router.js
// 1.1 導入 vue-router
import VurRouter from 'vue-router'// 1.2 創建路由對象
var router =  new VueRouter({routes:[],    // 這一行創建自己的路由規則linkActiveClass: 'mui-active'     // 這里假設了高亮類為 mui-active
})// 1.3 導出自己的路由
export default router

配置路由規則

// router.js
// 1.從其他頁面導入,做好的路由組件
import HomeContainer from './lib/components/tabbar/HomeContainer.vue'
import MemberContainer from './lib/components/tabbar/MemberContainer.vue'
import ShopcarContainer from './lib/components/tabbar/ShopcarContainer.vue'
import SearchContainer from './lib/components/tabbar/SearchContainer.vue'// 2.在路由對象上設置路徑和路由組件的對應規則
var router = new VueRouter({routes: [{ path: '/home', component: HomeContainer },{ path: '/member', component: MemberContainer },{ path: '/search', component: SearchContainer },{ path: '/shopcar', component: ShopcarContainer },// 配置路由規則]
})// app.vue
// 在主區域中顯示路由組件
<template>
<div>
<!-- 頂部區域 -->...<!-- 中間路由 router-view -->
<router-view></router-view><!-- 底部 tabbar 區域 -->
....