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 区域 -->
....