uniapp根据路由改变动态显示自定义tabbar组件怎么做

在uniapp中，可以使用条件渲染和动态组件来实现根据路由改变动态显示自定义tabbar组件的效果。

首先，在App.vue中定义一个自定义tabbar组件，如下所示：

<template>
  <view>
    <custom-tabbar v-if="showTabbar"></custom-tabbar>
    <router-view></router-view>
  </view>
</template>

<script>
import CustomTabbar from '@/components/CustomTabbar'

export default {
  components: {
    CustomTabbar
  },
  computed: {
    showTabbar () {
      // 根据路由判断是否显示自定义tabbar组件
      return this.$route.path !== '/home'
    }
  }
}
</script>

在上面的代码中，我们使用了条件渲染来判断是否显示自定义tabbar组件。通过computed属性中的showTabbar函数，我们可以根据当前路由来判断是否显示自定义tabbar组件。如果当前路由为/home，则不显示自定义tabbar组件；否则，显示自定义tabbar组件。

接下来，在自定义tabbar组件中，我们可以使用动态组件来实现不同的tabbar样式。例如，我们可以定义一个Tabbar1组件和一个Tabbar2组件，分别表示两种不同的tabbar样式。在自定义tabbar组件中，我们可以根据路由来决定显示哪种样式的tabbar。代码如下：

<template>
  <view>
    <component :is="tabbarType"></component>
  </view>
</template>

<script>
import Tabbar1 from '@/components/Tabbar1'
import Tabbar2 from '@/components/Tabbar2'

export default {
  components: {
    Tabbar1,
    Tabbar2
  },
  computed: {
    tabbarType () {
      // 根据路由判断显示哪种样式的tabbar
      return this.$route.path === '/home' ? 'Tabbar1' : 'Tabbar2'
    }
  }
}
</script>

在上面的代码中，我们使用了动态组件来根据路由显示不同的tabbar样式。通过computed属性中的tabbarType函数，我们可以根据当前路由来决定显示哪种样式的tabbar。

最后，我们将自定义tabbar组件引入到App.vue中，并在路由发生变化时实现动态显示。这样，就可以根据路由改变动态显示自定义tabbar组件了。