vue 底部footer导航组件

底部导航一定要用路径!!! 贼TM关键

 举个例子: 你随便定义了一个变量, flag : 0 跳转首页, falg:1,跳转我的,底部导航的组件不可能全项目使用, 点击我的页面  这个时候flag 已经变成了1,从我的页面进入详情页,从详情页返回的时候,虽然路由没有变,但是flag 已经初始化成了0,我们的判断条件没办法自定义,每次从详情页返回的时候都会被初始化,

!!! 判断一定要用路径

$route.path

<template><div class="footer"><div class="costList1" @click="choiceState('/dashboard/Analysis')"><img class="costUrl" v-if="$route.path==='/dashboard/analysis'" src="../../assets/img/bot-apply0.png" /><img class="costUrl" v-else src="../../assets/img/bot-apply1.png" /><divclass="costName":style="{color:$route.path==='/dashboard/analysis'?'rgb(18,139,232)':'rgba(0, 0, 0, 0.65)'}">首页</div></div><div class="costList1" @click="choiceState('/dashboard/ToExamine')"><a-badge :count="this.$store.state.applyNum"><img class="costUrl" v-if="$route.path==='/dashboard/ToExamine'" src="../../assets/img/1.png" /><img class="costUrl" v-else src="../../assets/img/0.png" /></a-badge><divclass="costName":style="{color:$route.path==='/dashboard/ToExamine'?'rgb(18,139,232)':'rgba(0, 0, 0, 0.65)'}">审核</div></div><div class="costList1" @click="choiceState('/dashboard/mine')"><img class="costUrl" v-if="$route.path==='/dashboard/mine'" src="../../assets/img/mine11.png" /><img class="costUrl" v-else src="../../assets/img/mine12.png" /><divclass="costName":style="{color:$route.path==='/dashboard/mine'?'rgb(18,139,232)':'rgba(0, 0, 0, 0.65)'}">我的</div></div></div>
</template><script>
export default {name: 'LayoutFooter',data() {return {applyNum: 0,reimbNum: 0,wgtVer: ''}
}methods: {choiceState(path) {this.$router.push(path)}}
}
</script><style lang="scss" scoped>
.footer {position: fixed;bottom: 0;width: 100%;display: flex;justify-content: space-between;height: 58px;background: #eff0f6;align-items: center;.costList1 {display: flex;flex-direction: column;justify-content: center;flex: 1;height: 58px;align-items: center;img {width: 20px;height: 22px;}.costName {text-align: center;}}
}.ant-carousel >>> .slick-slide {text-align: center;height: 160px !important;line-height: 160px;background: #364d79;overflow: hidden;
}.ant-carousel >>> .slick-slide h3 {color: #fff;
}</style>

vue 底部footer导航组件相关推荐

vue底部选择器_Vue组件-极简的地址选择器
一.前言本文用Vue完成一个极简的地点选择器,我们接下来带大家实现这个.当然其中也有一些值得学习与注意的地方.话不多说,我们先上demo图.因为每个人的需要不一样,我这边就不在实现更多的功能,所以留 ...
vue底部跳转_详解Vue底部导航栏组件
不多说直接上代码 BottomNav.vue: {{item.name}} export default{ props:['idx'], data(){ return { items:[{ cls:& ...
转-TabHost组件(二)（实现底部菜单导航）
http://www.cnblogs.com/lichenwei/p/3975095.html 上面文章<安卓开发复习笔记--TabHost组件(一)(实现底部菜单导航)>中提到了利用自定 ...
vue 移动端顶部导航组件
废话不多说,下面是我自己写的vue移动端顶部导航组件给大家分享一下 ,动态绑定背景颜色,字体颜色,以及回退图标.需要的直接拿去放项目里用吧- 示例图: HTML <template>< ...
mu-bottom-navigation导航组件使用阿里巴巴字体图标的方法,vue使用Muse-UI引入阿里巴巴字体图标的方法
Muse-UI引入阿里巴巴字体图标的方法,以及mu-bottom-navigation导航组件使用阿里巴巴字体图标的方法好紧张第一次写博客,第一次总是痛并快乐着.?有写的不对的,不欢迎广大网友指正? ...
CSS div footer,网站Footer导航完美自动固定在底部div+css
网站Footer导航完美自动固定在底部div+css,为啥要添加完美呢?因为马上过年,我们需要一个比今年更完美一点我们在设计网页的时候,都会遇到一个问题: 我底部导航要在底部,用position: ...
关于vue.js 编程导航的使用：实现路由配置和跳转页面
本文主要讲述:通过vue.js 编程导航,实现路由配置和跳转页面的功能! 基础篇,仅作为简单演示. 总结不能保证用户一定会点击某些按钮并且当前操作,除了路由跳转以外,还会有一些别的附加操作(比如执 ...
vue.js 编程导航，如何传递参数？
本文主要讲述:关于vue.js 编程导航,如何传递参数? 本文主要讲述:通过vue.js 编程导航,实现路由配置和跳转页面的功能! 基础篇,仅作为简单演示. 总结不能保证用户一定会点击某些按钮并且 ...
bootstrap手机网站H5模板固定底部顶部导航DEMO下载
bootstrap手机网站H5模板固定底部顶部导航DEMO下载 <!DOCTYPE html> <html lang="zh-CN"><head> ...

vue 底部footer导航组件

底部导航一定要用路径!!! 贼TM关键

vue 底部footer导航组件相关推荐

最新文章

热门文章