我的
做完HTML结构的编写，那我们在给上面的骨架穿上衣服，根据需求“底部固定”，我们很容易便会想到 position: fixed ，当然我这里也是用固定定位实现的，但布局采用的是 flex，在采用 flex 结合固定定位布局的时候常常会出现很多不必要的问题，如：flex 属性失效，两者效果冲突等，原因更多的便是“脱标”导致的，其中更多的便是出现在父元素 flex，子元素 position的时候，这时候可以中间加个div使两者摆脱联系。
css 样式（ stylus形式 ）
.footer
position fixed
bottom 0
z-index 999
max-width 1080px
width 100%
border-top 1px solid #C0C0C0
.module-nav
display flex
justify-content space-around
.nav-i
width 60px
text-align center
.icon
font-size 35px
padding 5px 0
.icon-add
font-size 60px
h4
font-size 15px
font-weight normal
margin 0
padding-bottom 5px
骨架和衣服都做好后，那么大概的雏形就出来了，我们的需求也就实现了一半，剩下的便是组件切换了。这个就简单了，只需要配置下路由表，然后指定跳转便可以了
路由表
routes: [
{
path: "/",
name: "home",
component: Home
},
{
path: "/find",
name: "find",
component: Find
},
{
path: "/info",
name: "info",
component: Info
},
{
path: "/user",
name: "user",
component: User
}
] 最后在“容器”内添加router-view即可，下面可以看看完整代码：
// HTML
首页
发现
消息
我的
// css
.footer
position fixed
bottom 0
z-index 999
max-width 1080px
width 100%
border-top 1px solid #C0C0C0
.module-nav
display flex
justify-content space-around
.nav-i
width 60px
text-align center
.icon
font-size 35px
padding 5px 0
.icon-add
font-size 60px
h4
font-size 15px
font-weight normal
margin 0
padding-bottom 5px
// router
export default new Router({
routes: [
{
path: "/",
name: "home",
component: Home
},
{
path: "/find",
name: "find",
component: Find
},
{
path: "/info",
name: "info",
component: Info
},
{
path: "/user",
name: "user",
component: User
}
]
});
以上是“移动端底部导航固定配合vue-router如何实现组件切换功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
分享标题：移动端底部导航固定配合vue-router如何实现组件切换功能-创新互联
文章地址：http://bzwzjz.com/article/decccj.html
