vue --- > vue-router(项目模式的导入)

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