利用vant如何給tabbar配置路由

更新時間：2022年04月28日 08:48:21 作者：Simple_IDE

這篇文章主要介紹了利用vant如何給tabbar配置路由，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

給tabbar配置路由

在父級路由寫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>

在路由配置的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

vant踩坑記錄

tabbbar路由模式

<router-view />
<van-tabbar route>
? <van-tabbar-item replace to="/home/menu/資源" icon="home-o">標簽</van-tabbar-item>
? ? <van-tabbar-item replace to="/home/menu/信息" icon="home-o">標簽</van-tabbar-item>
? <van-tabbar-item replace to="/search" icon="search">標簽</van-tabbar-item>
</van-tabbar>

這里使用路由傳參

二級路由跳轉到子級頁面，返回以后，tabbar按鈕高亮消失，原因是傳遞的參數(shù)不能是漢字，改為英文就好了

<router-view />
<van-tabbar route>
? <van-tabbar-item replace to="/home/menu/resources" icon="home-o">標簽</van-tabbar-item>
? ? <van-tabbar-item replace to="/home/menu/information" icon="home-o">標簽</van-tabbar-item>
? <van-tabbar-item replace to="/search" icon="search">標簽</van-tabbar-item>
</van-tabbar>

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: