vant 官方文档:https://vant-contrib.gitee.io/vant/#/zh-CN/tabbar
第一步,下载vant 和 router 组件,和在main.js 引入
import Vue from 'vue'
import App from './App.vue'
import Vant from 'vant';
import 'vant/lib/index.css';
import router from './router';//这里是自定义路由规则,文章末尾贴出【自定义路由规则】
Vue.config.productionTip = false;
Vue.use(Vant);
new Vue({
router,
render: h => h(App),
}).$mount('#app');
第二步,在App.vue 编写tabbar代码
<template>
<div id="app">
<van-tabbar v-model="active" route>
<van-tabbar-item replace to="/home" icon="chat-o" badge="5">消息</van-tabbar-item>
<van-tabbar-item replace to="/friends" icon="friends-o">好友</van-tabbar-item>
<van-tabbar-item replace to="/setting" icon="setting-o">设置</van-tabbar-item>
</van-tabbar>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
active: 0,//由于这里使用了vant 标签栏路由模式,该设置无效(但是此处不可删除)。可以自己尝试看看
}
},
//初始化页面选中状态
created() {
//由于 vant 标签栏路由模式,无法自动加载页面,所以这里需要初始化
console.log(this.$route);//打印当前路由属性
if (this.$route.path === '/') {
this.$router.push('/home');
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
/*margin-top: 40px;*/
}
</style>
自定义路由规则
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//页面视图,以实际项目为准
import SettingIndex from '../views/setting/Index.vue';
import Friend from '../views/friends/Index.vue';
import Home from '../views/home/Index';
//路由表
const routes = [
{
path: '/home',
name:'/home',
component: Home
},
{
path: '/friends',
name:'/friends',
component: Friend
},
{
path: '/setting',
name:'/setting',
component: SettingIndex
},
];
const router = new VueRouter({
routes,
mode: 'history'
});
export default router