这篇文章主要讲解了“vue底部footer导航组件问题怎么解决”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue底部footer导航组件问题怎么解决”吧！
Vue底部footer导航组件
底部导航一定要用路径!!! 贼关键
举个例子：
你随便定义了一个变量, 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" /> <div class="costName" : >首页</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> <div class="costName" : >审核</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" /> <div class="costName" : >我的</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 h4 { color: #fff;}</style>Vue抽取的footer组件,可复用
<template> <div class="app-foot"> {{footerMsgCopyright}} <span class="source">{{footerMsgName}}</span> </div></template><script>export default { name: 'AppFoot', data() { return { // 版权说明的文字 footerMsgCopyright: 'Copyright © 2020-2021 xxxx平台 - Powered By ', // 单位 footerMsgName: 'xxxx实验室' } }}</script><style scoped>.app-foot { min-height: 35px; background-color: #eeeeee; width: 100%; font-size: 14px; display: flex; align-items: center; justify-content: center;}.source{ font-weight: 600;}</style>复用时直接调用组件
主页面设定高度时，要把footer的高度空出来，其style可以如下：
<style>.main-container{ min-height: calc(100vh - 35px);}</style>感谢各位的阅读，以上就是“vue底部footer导航组件问题怎么解决”的内容了，经过本文的学习后，相信大家对vue底部footer导航组件问题怎么解决这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！
