Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to solve the problem of footer navigation component at the bottom of vue". The explanation content in this article is simple and clear, easy to learn and understand. Please follow the idea of Xiaobian to study and learn "how to solve the problem of footer navigation component at the bottom of vue" together.

Vue bottom footer navigation component

The bottom navigation must use the path!!! Thief key

For example:

You define a variable randomly, flag : 0 jump home, falg:1, jump mine,

The bottom navigation component cannot be used for all projects. Click on my page. At this time, the flag has become 1.

When you enter the details page from my page and return from the details page, although the route has not changed, flag has been initialized to 0.

Our judgment conditions cannot be customized, and will be initialized every time we return from the details page.

!!! The judgment must use the path

$route.path

home

audit

我的 export default { name: 'LayoutFooter', data() { return { applyNum: 0, reimbNum: 0, wgtVer: '' }} methods: { choiceState(path) { this.$router.push(path) } }}.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;}Vue抽取的footer组件,可复用 {{footerMsgCopyright}} {{footerMsgName}} export default { name: 'AppFoot', data() { return { // 版权说明的文字 footerMsgCopyright: 'Copyright © 2020-2021 xxxx平台 - Powered By ', // 单位 footerMsgName: 'xxxx实验室' } }}.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;}复用时直接调用组件

主页面设定高度时，要把footer的高度空出来，其style可以如下：

.main-container{ /* 35 = footer */ min-height: calc(100vh - 35px);}感谢各位的阅读，以上就是"vue底部footer导航组件问题怎么解决"的内容了，经过本文的学习后，相信大家对vue底部footer导航组件问题怎么解决这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.