O componente vant van-tabbar implementa a navegação inferior

Basta usar van-tabbar para implementar a navegação inferior

Sou novo em terminais móveis e experimentei pela primeira vez o desenvolvimento móvel H5. Usei o van-tabbar do vant2 para implementar a função de navegação inferior. Este artigo ignora as etapas de uso do vant e usa referências globais no projeto. Como muitos artigos são consultados, alguns são muito complicados e algumas funções não estão implementadas, então irei simplesmente organizá-los.Se você tiver alguma dúvida, deixe uma mensagem para corrigi-la.

1. Crie o componente de navegação inferior

A barra de navegação inferior é simples de implementar, deve-se ressaltar que o componente precisa ser referenciado em todas as páginas que precisam ser utilizadas. Portanto, combine a barra de navegação inferior e encapsule-a em um componente.

// Tabbar组件
<template>
  <div>
  <router-view></router-view>
  <van-tabbar v-model="tabbarTempValue" route >
    <van-tabbar-item name="news" icon="home-o"  replace to="/news">资讯待办</van-tabbar-item>
    <van-tabbar-item name="workBench" icon="friends-o" replace to="/workBench">工作台</van-tabbar-item>
    <van-tabbar-item name="setting" icon="setting-o" replace to="/setting">我的</van-tabbar-item>
  </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'tabbar',
  props: {
    active: Number
  },
  data () {
    return {
      tabbarTempValue: this.active
    }
  },
  methods: {
  }
}
</script>

<style scoped>

</style>

2. Referência de subpágina

// news页面
<template>
  <div>
    我是news
    <Tabbar :active=0 />
  </div>

</template>

<script>
import Tabbar from './tabbar'
export default {
  name: "news",
  components: {
    Tabbar
  },
  data () {
    return {}
  }
}
</script>

<style scoped>

</style>

Otimize o uso do van-tabbar

Embora o método acima possa realizar a função de navegação inferior, é um pouco rebuscado. A nova ideia é criar a página principal usando van-tabbar, ativar o modo de roteamento e cooperar com a hierarquia de roteamento para obter o efeito de navegação inferior. O código principal completo é o seguinte.

1. Crie a página principal

// homePage页面主页代码
<router-view />
    <van-tabbar class="layout-tabbar" route  >
      <van-tabbar-item name="news" icon="home-o"  :to="{name: 'news'}">资讯</van-tabbar-item>
      <van-tabbar-item name="workBench" icon="friends-o"   :to="{name : 'workBench'}">工作台</van-tabbar-item>
      <van-tabbar-item name="setting" icon="setting-o"   :to="{name : 'setting'}">设置</van-tabbar-item>
    </van-tabbar>

2. Crie submódulos

   子模块代码没有限制

3. Configure o roteamento (muito importante)

{path: '/',
  component: _import('modules/mobile/homePage'),
  children: [
    {
      path: '', // 默认子路由
      name: 'news',
      component: _import('modules/mobile/news')
    },
    {
      path: '/setting', // 设置
      name: 'setting',
      component: _import('modules/mobile/setting')
    },
    {
      path: '/workBench', // 工作台
      name: 'workBench',
      component: _import('modules/mobile/workBench')
    }
  ]

4. Resumo

Depois de configurar subrotas no roteamento e ativar o modo de roteamento van-tabbar, você pode obter o efeito de navegação inferior. Deve-se notar que se o to do van-tabbar for escrito diretamente no modo to="/setting", a página inicial sempre será destacada (por motivos desconhecidos, por favor deixe uma mensagem).