移动端底部导航固定配合vue-router如何实现组件切换功能

我的

  做完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如何实现组件切换功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！