将四个主页面配置为 tab-bar 的子路由

normi-D18

已于 2024-02-29 09:02:18 修改

阅读量281

点赞数 2

文章标签：前端服务器 linux

于 2024-02-29 09:01:45 首次发布

本文链接：https://blog.csdn.net/weixin_47175934/article/details/136361385

版权

本文详细描述了如何在Vue项目中使用Vant组件库构建一个带有路由功能的布局页面，包括默认子路由和tabbar导航栏的设计与配置。

摘要由CSDN通过智能技术生成

使用vant组件库

路由

{
  path: '/',
name: 'layout',
    component: () => import('@/views/layout'),
  children: [
    {
      path: '', // 默认子路由
      name: 'home',
      component: () => import('@/views/home')
    },
    {
      path: 'qa',
      name: 'qa',
      component: () => import('@/views/qa')
    },
    {
      path: 'video',
      name: 'video',
      component: () => import('@/views/video')
    },
    {
      path: 'my',
      name: 'my',
      component: () => import('@/views/my')
    }
  ]
}

layout页面

<template>
  <div class="layout-container">
    <!-- 子路由出口 -->
    <router-view />
    <!-- /子路由出口 -->

    <!-- 标签导航栏 -->
    <!--
      route: 开启路由模式
     -->
    <van-tabbar class="layout-tabbar" route>
      <van-tabbar-item replace to="/">
        <!-- <template #icon="props"> -->
        <i slot="icon" class="iconfont icon-shouye"></i>
        <!-- </template> -->
        <span class="text">首页</span>
      </van-tabbar-item>
      <van-tabbar-item replace to="/qa" icon="search">
        <template #icon="props">
          <i class="iconfont icon-pinglun"></i>
        </template>
        <span class="text">问答</span>
      </van-tabbar-item>
      <van-tabbar-item replace to="/video" icon="home-o">
        <template #icon="props">
          <i class="iconfont icon-shipin"></i>
        </template>
        <span class="text"> 视频</span>
      </van-tabbar-item>
      <van-tabbar-item replace to="/my" icon="search">
        <template #icon="props">
          <i class="iconfont icon-wode"></i>
        </template>
        <span class="text"> 我的</span>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'LayoutIndex',
  components: {

  },
  data() {
    return {

    };
  },
  created() {

  },
  mounted() {

  },
  methods: {

  },
}
</script>
<style scoped lang='less'>
.layout-container {
  .layout-tabbar {
    i.toutiao {
      font-size: 40px;
    }

    span.text {
      font-size: 20px;
    }
  }
}
</style>