利用vant给tabbar配置路由

1.在父级路由写tabbar标签

<template>
<div class="layoutContainer">
    <!-- 子路由出口 -->
    <router-view></router-view>
    <!-- 底部导航栏 -->
    <!-- 给tabbar--route属性  然后给每一项to属性就可以路由跳转了 -->
    <van-tabbar v-model="active" route>
        <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
        <van-tabbar-item icon="search" to="/question">问答</van-tabbar-item>
        <van-tabbar-item icon="friends-o" to="/video">视频</van-tabbar-item>
        <van-tabbar-item icon="setting-o" to="/my">我的</van-tabbar-item>
    </van-tabbar>
</div>
</template>

<script>
export default {
    name: 'layoutIndex',
    data() {
        return {
            active: 0
        }
    }
}
</script>

<style>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}
</style>

2.在路由配置的JavaScript文件中

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)
//路由表
const routes = [
  {
    path:'/login',
    name:'login',
    component:()=>import('@/views/login/')
  },
  {
    path:'/',
    component:()=>import('@/views/layout/'),
    children:[
      {
        path:'',//首页是默认子路由,所谓为空
        name:'home',
        component:()=>import('@/views/home/')
      },
      {
        path:'/question',
        name:'question',
        component:()=>import('@/views/question/')
      },
      {
        path:'/video',
        name:'video',
        component:()=>import('@/views/video/')
      },
      {
        path:'/my',
        name:'my',
        component:()=>import('@/views/my/')
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

在这里插入图片描述

  • 9
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
对于Vue 3和Vant移动端Tabbar的使用,你可以按照以下步骤进行操作: 1. 首先,确保你已经安装了Vue 3和Vant。你可以使用npm或者yarn来进行安装: ``` npm install vue@next npm install vant@next ``` 2. 在你的Vue项目中,创建一个新的组件用于Tabbar,并导入所需的Vant组件: ```vue <template> <div> <van-tabbar v-model="active"> <van-tabbar-item icon="home-o" :to="{ path: '/' }" /> <van-tabbar-item icon="search" :to="{ path: '/search' }" /> <van-tabbar-item icon="friends-o" :to="{ path: '/friends' }" /> <van-tabbar-item icon="setting-o" :to="{ path: '/settings' }" /> </van-tabbar> <!-- 在这里添加你的页面内容 --> </div> </template> <script> import { Tabbar, TabbarItem } from 'vant'; import { defineComponent } from 'vue'; export default defineComponent({ components: { [Tabbar.name]: Tabbar, [TabbarItem.name]: TabbarItem, }, data() { return { active: 0, // 默认选中的tab索引 }; }, }); </script> ``` 3. 在你的配置文件中,添加对应的由信息: ```javascript import { createRouter, createWebHistory } from 'vue-router'; const routes = [ { path: '/', component: Home }, { path: '/search', component: Search }, { path: '/friends', component: Friends }, { path: '/settings', component: Settings }, ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 4. 最后,在你的入口文件(main.js)中,引入所需的组件和配置: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import { Tabbar, TabbarItem } from 'vant'; const app = createApp(App); app.use(router); app.use(Tabbar); app.use(TabbarItem); app.mount('#app'); ``` 这样,你就可以在移动端使用VantTabbar组件来实现底部导航栏了。根据你的需求,你可以自定义每个TabbarItem的图标和跳转链接。记得根据你的项目需要,添加页面内容到Tabbar组件的下方。希望这能帮到你!如果还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值