vue移动端尾部组件

<template>

<div style="height:50px;">

<van-tabbar

v-model="active"

style="background: #032E4D"

>

<van-tabbar-item icon="wap-home" to="/Home" >首页</van-tabbar-item>

<van-tabbar-item icon="orders-o" to="/indent" >订单</van-tabbar-item>

<van-tabbar-item icon="setting-o" to="" @click.native="donot">设置</van-tabbar-item>

<!-- <van-tabbar-item icon="contact" to="/user/index">我的</van-tabbar-item> -->

</van-tabbar>

</div>

</template>

 

<script>

import { Tabbar, TabbarItem } from "vant";

export default {

data() {

return {

active: '0'

}

},

name:'navigate',

components:{

[Tabbar.name]: Tabbar,

[TabbarItem.name]: TabbarItem,

},

created(){

this.upactive();

},

updated(){

this.upactive()

},

methods:{

upactive(){

this.nowPath=this.$route.path;

//vue提供的方法

if(this.nowPath=="/Home"){

this.active=0

}else if(this.nowPath=="/indent"||this.nowPath=="/detail"||this.nowPath=="/todo"){

this.active=1

}else if(this.nowPath=="/setup"){

this.active=2

}

},

donot(){

alert("暂未开放")

}

},

 

}

</script>