利用vant如何给tabbar配置路由
短信预约 -IT技能 免费直播动态提醒
给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按钮高亮消失，原因是传递的参数不能是汉字，改为英文就好了
<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>以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
