利用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基于better-scroll實現(xiàn)左右聯(lián)動滑動頁面
這篇文章主要介紹了vue基于better-scroll實現(xiàn)左右聯(lián)動滑動頁面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-06-06Vue動態(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