Vant 底部导航组件的实现 tabbar

设计底部导航的功能组件

1. 路由跳转

2. 选项卡的原理

3. 路由拦截

<template>
  <van-tabbar v-model="active" active-color="#30A3F8">
    <van-tabbar-item 
      v-for="(item,index) in tabbars" 
      :key="index" 
      :to="(item.name)"
    >
      <span>{
  {item.title}}</span>
      <img slot="icon" slot-scope="props" :src="props.active ? item.active : item.normal" />
    </van-tabbar-item>
  </van-tabbar>
</template>
<script>
export default {
  name: "tabbar",
  data() {
    return {
      active: 0,
      tabbars: [
        {
          name: "home",
          title: "首页",
          normal: require("@/assets/images/shop/icon1_1.png"),
          active: require("@/assets/images/shop/icon1_2.png")
        },
        {
          name: "sort