这篇文章主要讲解了“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><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 {
/* footer 固定在页面底部 */
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{
/* 35 = footer */
min-height: calc(100vh - 35px);
}
</style>感谢各位的阅读，以上就是“vue底部footer导航组件问题怎么解决”的内容了，经过本文的学习后，相信大家对vue底部footer导航组件问题怎么解决这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
