vant tabbar底部导航的使用

新建home.js

<template>
  <div id="home">
    <div class="tabbar_content">
      <router-view></router-view>
    </div>
    <!-- vant 标签栏 -->
    <van-tabbar
      route
      active-color="#0f5de5"
      inactive-color="#444"
    >
      <van-tabbar-item
        v-for="(item, index) in tabbar_items"
        :key="index"
        :class="['iconfont', item.iconClass]"
        replace
        :to="item.src"
        >{{item.title}}</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      active: 0,
      // tabIndex: 0,
      // tabbar_items: [
      //   { title: "首页", iconClass: "iconshouye", src: "/index" },
      //   { title: "快报", iconClass: "iconicon-test", src: "/scholar" },
      //   { title: "检索", iconClass: "iconsousuo1", src: "/search" },
      //   { title: "我的", iconClass: "iconwode", src: "/mine" },
      // ],
      tabbar_items: [
        { title: this.$t('tabbar.home'), iconClass: "iconshouye", src: "/index" },
        { title: this.$t('tabbar.scholar'), iconClass: "iconicon-test", src: "/scholar" },
        { title: this.$t('tabbar.search'), iconClass: "iconsousuo1", src: "/search" },
        { title: this.$t('tabbar.mine'), iconClass: "iconwode", src: "/mine" },
      ],
 
    };
  },
  methods: {},
};
</script>
<style lang="less" scoped>
#home {
  .tabbar_content {
    padding-bottom: 56px;
  }
  .van-tabbar {
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
  }
  .van-tabbar-item {
    border-right: 1px solid #eeeeee;
    font-size: 13px;
  }
  .van-tabbar-item:last-child {
    border: none;
  }
 
}
</style>
<!-- home -->
<template>
  <div id="home">
    <div class="tabbar_content">
      <router-view></router-view>
    </div>
    <!-- vant 标签栏 -->
    <van-tabbar
      route
      active-color="#0f5de5"
      inactive-color="#444"
    >
      <van-tabbar-item
        v-for="(item, index) in tabbar_items"
        :key="index"
        :class="['iconfont', item.iconClass]"
        replace
        :to="item.src"
        >{{item.title}}</van-tabbar-item
      >
    </van-tabbar>
  </div>
</template>
<script>
export default {
  name: "home",
  data() {
    return {
      active: 0,
      // tabIndex: 0,
      // tabbar_items: [
      //   { title: "首页", iconClass: "iconshouye", src: "/index" },
      //   { title: "快报", iconClass: "iconicon-test", src: "/scholar" },
      //   { title: "检索", iconClass: "iconsousuo1", src: "/search" },
      //   { title: "我的", iconClass: "iconwode", src: "/mine" },
      // ],
      tabbar_items: [
        { title: this.$t('tabbar.home'), iconClass: "iconshouye", src: "/index" },
        { title: this.$t('tabbar.scholar'), iconClass: "iconicon-test", src: "/scholar" },
        { title: this.$t('tabbar.search'), iconClass: "iconsousuo1", src: "/search" },
        { title: this.$t('tabbar.mine'), iconClass: "iconwode", src: "/mine" },
      ],
 
    };
  },
  methods: {},
};
</script>
<style lang="less" scoped>
#home {
  .tabbar_content {
    padding-bottom: 56px;
  }
  .van-tabbar {
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
  }
  .van-tabbar-item {
    border-right: 1px solid #eeeeee;
    font-size: 13px;
  }
  .van-tabbar-item:last-child {
    border: none;
  }
 
}
</style>
　　再router.js写入

import Vue from 'vue'
import Router from 'vue-router'
 
Vue.use(Router)
 
const routes = [
  {
    path: '/',
    redirect: '/index',
  },
  {
    path: '/home',
    component: () => import("@/views/home"),
    name: 'home',
    meta: { title: '首页' },
    children:[
      {
        path: "/index",
        name: "index",
        component: () => import("@/views/tabbar/index"),
        meta: { title: "首页" }
      },
      {
        path: "/scholar",
        name: "scholar",
        component: () => import("@/views/tabbar/scholar"),
        meta: { title: "快报" }
      },
      {
        path: "/search",
        name: "search",
        component: () => import("@/views/tabbar/search"),
        meta: { title: "检索" }
      },
      {
        path: "/mine",
        name: "mine",
        component: () => import("@/views/tabbar/mine"),
        meta: { title: "我的" }
      }
    ]
  },
  {
    path: "/setting",
    name: "setting",
    component: () => import("@/views/mine/setting"),
    meta: { title: "设置" }
  }
]
 
export default new Router({
  mode: 'history',// 访问路径不带井号
  routes: routes,
  // base: __dirname,
  // linkActiveClass: 'link-active',
  scrollBehavior (to, from, savedPosition) {
    // 控制跳到下一页面回到顶端
    if (savedPosition) {
      // 浏览器前进后退触发记录位置
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }
})

最后

以上就是火星上红牛为你收集整理的vant tabbar底部导航的使用的全部内容，希望文章能够帮你解决vant tabbar底部导航的使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。