制作页面底部的导航菜单。

1: 修改App.vue组件，注释相关的路由导向

<template>
    <div id="app">
        <!--<div id="nav">-->
            <!--<router-link to="/about">主页</router-link>-->
            <!--|-->
            <!--<router-link to="/">商品页</router-link>-->
            <!--|-->
            <!--<router-link to="/buycar">购物车</router-link>-->
        <!--</div>-->
        <router-view/>
    </div>
</template>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;

    }

    body {
        font-size: 16px;
        background-color: #f8f8f8;
        -webkit-font-smoothing: antialiased;
    }
</style>

2.观察，router.js路由配置修改请求路径为默认请求home.vue

http://localhost:8080/#/

3.修改Home.vue内容为：

<template>
    <div id="app">
        <van-tabbar active-color="#07c160">
            <van-tabbar-item icon="wap-home">首页</van-tabbar-item>
            <!--<van-tabbar-item icon="pending-evaluate">社区</van-tabbar-item>-->
            <van-tabbar-item icon="shopping-cart" info="5">购物车</van-tabbar-item>
            <van-tabbar-item icon="shopping-cart" info="5">购物车</van-tabbar-item>
            <van-tabbar-item icon="contact" info="2">我的</van-tabbar-item>
        </van-tabbar>
    </div>
</template>

<script>
    import {
        Tabbar,
        TabbarItem,
    } from 'vant';

    export default {
        components: {
            [Tabbar.name]: Tabbar,
            [TabbarItem.name]: TabbarItem
        },
        data() {
            return {};
        },
        methods: {}
    };
</script>

<style lang="less" scoped>

</style>

4：观察运行结果

image.png

5:添加点击切换事件处理

image.png

最终效果：

GIF.gif