<template> <div class="tabbar-layout-containter"> <div class="tabbar-layout-content"> <keep-alive v-if="$route.meta.keepAlive"> <router-view></router-view> </keep-alive> <router-view v-else></router-view> </div> <div class="tabbar-layout-footer"> <TabBar :data="tabbars" @change="handleChange" /> </div> </div> </template> <script> import TabBar from '@/components/TabBar' export default { name: 'TabBarLayout', data() { return { tabbars: [ { title: '首页', to: { name: 'Home' }, icon: 'home-o' }, { title: '关于我', to: { name: 'About' }, icon: 'user-o' } ] } }, components: { TabBar }, methods: { handleChange(v) { console.log('tab value:', v) } } } </script>