利用vant给tabbar配置路由
<template>
<div class="layoutContainer">
<!-- 子路由出口 -->
<router-view></router-view>
<!-- 底部导航栏 -->
<!-- 给tabbar--route属性 然后给每一项to属性就可以路由跳转了 -->
<van-tabbar v-model="active" route>
<van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
<van-tabbar-item icon="search" to="/question">问答</van-tabbar-item>
<van-tabbar-item icon="friends-o" to="/video">视频</van-tabbar-item>
<van-tabbar-item icon="setting-o" to="/my">我的</van-tabbar-item>
</van-tabbar>
</div>
</template>
<script>
export default {
name: 'layoutIndex',
data() {
return {
active: 0
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>