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

这篇文章主要介绍"vue-router怎么实现组件切换功能"，在日常操作中，相信很多人在vue-router怎么实现组件切换功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"vue-router怎么实现组件切换功能"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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

HTML 结构

 
容器
 
  
  
   

   
首页
  
  
   

   
发现
  
  
   

  
  
   

   
消息
  
  
   

   
我的
  
  
 
 

做完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// routerexport 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怎么实现组件切换功能"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！