<template> <div class="layout-container"> <!-- 子路由出口 --> <router-view /> <!-- 底部导航栏 --> <van-tabbar v-model="active" active-color="#000" inactive-color="#D9DEE4" > <van-tabbar-item v-for="item in tabbar" :key="item.path" :icon="item.icon" :to="item.path" >{{ item.text }}</van-tabbar-item> </van-tabbar> </div> </template> <script> import Vue from 'vue' import { Tabbar, TabbarItem } from 'vant' Vue.use(Tabbar) Vue.use(TabbarItem) export default { name: 'Layout', data() { return { active: 0, tabbar: [ { path: '/Course', text: '培训通知', icon: 'home-o' }, { path: '/StrongPhoto', text: '精彩集锦', icon: 'search' }, { path: '/UserCenter', text: '个人中心', icon: 'volume-o' } ] } }, created() { this.tabbar.map((item, idx) => { if (item.path === this.$route.path) { this.active = idx } }) }, methods: { goto(path) { this.$router.push(path) } }, components: {} } </script> <style lang="scss" scoped> </style>