怎么使用vue-router实现组件切换功能

本篇内容介绍了“怎么使用vue-router实现组件切换功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

首先，在实现这个需求之前，我们先分析或者回想下和自己做过的demo中哪个类似，相信很多朋友立马就会想起来---tab栏切换，那么对于HTML结构的设计我们便可以借助tab栏切换的结构：一个大盒子套着两个小盒子，一个作容器，另一个作导航！

HTML 结构

<div>
 <div>容器</div>
 <div class="footer">
  <div class="module-nav">
  <div class="nav-i">
   <div class="iconfont icon">&#xe610;</div>
   <h4>首页</h4>
  </div>
  <div class="nav-i">
   <div class="iconfont icon">&#xe629;</div>
   <h4>发现</h4>
  </div>
  <div class="nav-i">
   <div class="iconfont icon-add">&#xe84f;</div>
  </div>
  <div class="nav-i">
   <div class="iconfont icon">&#xe62c;</div>
   <h4>消息</h4>
  </div>
  <div class="nav-i">
   <div class="iconfont icon">&#xe601;</div>
   <h4>我的</h4>
  <div>
  </div>
 </div>
 </div>

做完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
<div>
 <div class="main-content">
  <router-view></router-view>
 </div>
 <div class="footer">
  <div class="module-nav">
  <router-link tag="div" to="/" class="nav-i">
   <div class="iconfont icon">&#xe610;</div>
   <h4>首页</h4>
  </router-link>
  <router-link tag="div" to="/find" class="nav-i">
   <div class="iconfont icon">&#xe629;</div>
   <h4>发现</h4>
  </router-link>
  <div class="nav-i">
   <div class="iconfont icon-add">&#xe84f;</div>
  </div>
  <router-link tag="div" to="/info" class="nav-i">
   <div class="iconfont icon">&#xe62c;</div>
   <h4>消息</h4>
  </router-link>
  <router-link tag="div" to="/user" class="nav-i">
   <div class="iconfont icon">&#xe601;</div>
   <h4>我的</h4>
  </router-link>
  </div>
 </div>
 </div>

// 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实现组件切换功能”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注蜗牛博客网站，小编将为大家输出更多高质量的实用文章！