Vant封装Tabbar路由跳转
明知山_ 人气:0本文主要介绍了VantUI封装自定义Tabbar路由跳转的实现,分享给大家,具体如下:
在src目录下新建个components文件夹来放自己定义的tabbar组件
<template> <div v-if=" $route.name == 'index' || $route.name == 'learn' || $route.name == 'person' " > <van-tabbar v-model="active" inactive-color="#666666" active-color="#000000" fixed placeholder> <van-tabbar-item replace v-for="(item, index) in tabbarList" :key="index" :to="item.path"> <span>{{ item.title }}</span> <img slot="icon" slot-scope="props" :src="props.active ? item.active : item.normal" /> </van-tabbar-item> </van-tabbar> </div> </template> <script> export default { name: "tabbar", data() { return { active: 0, tabbarList: [ { path: "/", title: "首页", normal: "https://sucai.suoluomei.cn/sucai_zs/images/20190910093117-fx2.png", active: "https://sucai.suoluomei.cn/sucai_zs/images/20190910093117-fx.png", }, { path: "/learn", title: "学习", normal: "https://sucai.suoluomei.cn/sucai_zs/images/20190910093117-xx.png", active: "https://sucai.suoluomei.cn/sucai_zs/images/20190910093117-xx2.png", }, { path: "/person", title: "我的", normal: "https://sucai.suoluomei.cn/sucai_zs/images/20190910093117-wd.png", active: "https://sucai.suoluomei.cn/sucai_zs/images/20190910093117-wd2.png", }, ], }; }, //监听路由变化 watch: { $route(to) { this.activeTab(to.path); }, }, methods: { activeTab(path) { var index = this.tabbarList.map((item) => item.path).indexOf(path); if (index != -1) { this.active = index; } }, }, }; </script>
引入tabbar组件的页面到app.vue
<template> <div id="app"> <router-view /> <tabbar></tabbar> </div> </template> <script> import tabbar from "./components/tabbar.vue"; //引用组件的地址 export default { components: { tabbar }, name: "App", data() { return {}; }, methods: {}, }; </script>
github完整项目
加载全部内容