制作页面底部的导航菜单。
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
