利用vant如何給tabbar配置路由
給tabbar配置路由
在父級(jí)路由寫(xiě)tabbar標(biāo)簽
<template> <div class="layoutContainer"> ? ? <!-- 子路由出口 --> ? ? <router-view></router-view> ? ? <!-- 底部導(dǎo)航欄 --> ? ? <!-- 給tabbar--route屬性 ?然后給每一項(xiàng)to屬性就可以路由跳轉(zhuǎn)了 --> ? ? <van-tabbar v-model="active" route> ? ? ? ? <van-tabbar-item icon="home-o" to="/">首頁(yè)</van-tabbar-item> ? ? ? ? <van-tabbar-item icon="search" to="/question">問(wèn)答</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:'',//首頁(yè)是默認(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>
這里使用路由傳參
二級(jí)路由跳轉(zhuǎn)到子級(jí)頁(yè)面,返回以后,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>
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)web滾動(dòng)條分頁(yè)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)web滾動(dòng)條分頁(yè),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04vue跳轉(zhuǎn)到詳情頁(yè)的兩種實(shí)現(xiàn)方法
最近接觸了vue項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)到詳情頁(yè)的兩種實(shí)現(xiàn)方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-06-06Nuxt 項(xiàng)目性能優(yōu)化調(diào)研分析
這篇文章主要介紹了Nuxt 項(xiàng)目性能優(yōu)化調(diào)研分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11vue基于better-scroll實(shí)現(xiàn)左右聯(lián)動(dòng)滑動(dòng)頁(yè)面
這篇文章主要介紹了vue基于better-scroll實(shí)現(xiàn)左右聯(lián)動(dòng)滑動(dòng)頁(yè)面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06vscode 插件開(kāi)發(fā) + vue的操作方法
這篇文章主要介紹了vscode 插件開(kāi)發(fā) + vue的操作方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06Vue動(dòng)態(tài)數(shù)據(jù)實(shí)現(xiàn)?el-select?多級(jí)聯(lián)動(dòng)、數(shù)據(jù)回顯方式
這篇文章主要介紹了Vue動(dòng)態(tài)數(shù)據(jù)實(shí)現(xiàn)?el-select?多級(jí)聯(lián)動(dòng)、數(shù)據(jù)回顯方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07