欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

利用vant如何給tabbar配置路由

 更新時間:2022年04月28日 08:48:21   作者:Simple_IDE  
這篇文章主要介紹了利用vant如何給tabbar配置路由,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

給tabbar配置路由

在父級路由寫tabbar標(biāo)簽

<template>
<div class="layoutContainer">
? ? <!-- 子路由出口 -->
? ? <router-view></router-view>
? ? <!-- 底部導(dǎo)航欄 -->
? ? <!-- 給tabbar--route屬性 ?然后給每一項to屬性就可以路由跳轉(zhuǎn)了 -->
? ? <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:'',//首頁是默認(rèn)子路由,所謂為空
? ? ? ? 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">標(biāo)簽</van-tabbar-item>
? ? <van-tabbar-item replace to="/home/menu/信息" icon="home-o">標(biāo)簽</van-tabbar-item>
? <van-tabbar-item replace to="/search" icon="search">標(biāo)簽</van-tabbar-item>
</van-tabbar>

這里使用路由傳參

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

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

以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue實現(xiàn)web滾動條分頁

    vue實現(xiàn)web滾動條分頁

    這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)web滾動條分頁,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue跳轉(zhuǎn)到詳情頁的兩種實現(xiàn)方法

    vue跳轉(zhuǎn)到詳情頁的兩種實現(xiàn)方法

    最近接觸了vue項目,下面這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)到詳情頁的兩種實現(xiàn)方法,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2023-06-06
  • 將Vue組件庫更換為按需加載的方法步驟

    將Vue組件庫更換為按需加載的方法步驟

    這篇文章主要介紹了將Vue組件庫更換為按需加載的方法步驟,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-05-05
  • 詳解Vue router路由

    詳解Vue router路由

    這篇文章主要為大家介紹了Vue 的router路由,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11
  • Nuxt 項目性能優(yōu)化調(diào)研分析

    Nuxt 項目性能優(yōu)化調(diào)研分析

    這篇文章主要介紹了Nuxt 項目性能優(yōu)化調(diào)研分析,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • vue基于better-scroll實現(xiàn)左右聯(lián)動滑動頁面

    vue基于better-scroll實現(xiàn)左右聯(lián)動滑動頁面

    這篇文章主要介紹了vue基于better-scroll實現(xiàn)左右聯(lián)動滑動頁面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-06-06
  • vscode 插件開發(fā) + vue的操作方法

    vscode 插件開發(fā) + vue的操作方法

    這篇文章主要介紹了vscode 插件開發(fā) + vue的操作方法,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-06-06
  • Vue動態(tài)數(shù)據(jù)實現(xiàn)?el-select?多級聯(lián)動、數(shù)據(jù)回顯方式

    Vue動態(tài)數(shù)據(jù)實現(xiàn)?el-select?多級聯(lián)動、數(shù)據(jù)回顯方式

    這篇文章主要介紹了Vue動態(tài)數(shù)據(jù)實現(xiàn)?el-select?多級聯(lián)動、數(shù)據(jù)回顯方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • Vue中v-for更新檢測的操作方法

    Vue中v-for更新檢測的操作方法

    v-for 指令需要使用 item in items 形式的特殊語法,其中 items 是源數(shù)據(jù)數(shù)組,而 item 則是被迭代的數(shù)組元素的別名。今天通過本文給大家介紹Vue中v-for更新檢測的操作方法,感興趣的朋友一起看看吧
    2021-10-10
  • Vue多系統(tǒng)切換實現(xiàn)方案

    Vue多系統(tǒng)切換實現(xiàn)方案

    本篇文章給大家分享了關(guān)于Vue多系統(tǒng)切換實現(xiàn)的解決方案,對此有需要的朋友可以跟著參考學(xué)習(xí)下。
    2018-06-06

最新評論