利用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按钮高亮消失,原因是传递的参数不能是汉字,改为英文就好了
<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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue前端实现导出页面为pdf(分页导出、不分页导出及分模块导出)
在实际应用中可能用户希望将系统中一个页面展示的所有数据报表,用PDF的文件格式下载下来,以便于其他用途,这篇文章主要给大家介绍了关于vue前端实现导出页面为pdf(分页导出、不分页导出及分模块导出)的相关资料,需要的朋友可以参考下2024-06-06
Element ui table表格内容超出隐藏显示省略号问题
这篇文章主要介绍了Element ui table表格内容超出隐藏显示省略号问题,具有很好的参考价值,希望对大家有所帮助,2023-11-11
详解vue-cli中的ESlint配置文件eslintrc.js
本篇文章主要介绍了vue-cli中的ESlint配置文件eslintrc.js详解 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-09-09


最新评论