【CSDN软件工程师能力认证学习精选】 vue路由切换

CSDN软件工程师能力认证（以下简称C系列认证）是由中国软件开发者网CSDN制定并推出的一个能力认证标准。C系列认证历经近一年的实际线下调研、考察、迭代、测试，并梳理出软件工程师开发过程中所需的各项技术技能，结合企业招聘需求和人才应聘痛点，基于公开、透明、公正的原则，甑别人才时确保真实业务场景、全部上机实操、所有过程留痕、存档不可篡改。

我们每天将都会精选CSDN站内技术文章供大家学习，帮助大家系统化学习IT技术。

看了 好多关于 vue 路由切换的文章 都不太理想 , 自己花了点时间 研究下vue的路由切换仅供大家参考,这个案例使用element-ui+vue-router实现

整体效果:

第一步

1. 在 components 目录下创建创建 routerTab 文件夹
2. 在 routerTab 目录下创建 A.vue,B.vue,C.vue 三个组件
3. 在 routerTab 目录下创建 index.vue
4. 在 routerTab 目录下创建 header.vue
5. 在 routerTab 目录下创建 aside.vue

目录结构:

以下是 A.vue,B.vue,C.vue,header.vue 组件 

  

   A 组件
  


export default {
  name:"AComponent"
}


 

 

 

  

    B 组件
  


export default {
  name:"BComponent"
}


 

 

 

  

    C 组件
  


export default {
  name:"CComponent"
}


 

 

 

  头部组件 


export default {
  name:'header'
}


 

第二步: 配置路由 , 在 router/index.js 添加以下代码

{
      path: '/index',//  注意 / 代表根目录
      name: 'index',
      component: resolve => require(['@/components/routerTab/index.vue'],resolve), //懒加载组件
      children:[
        {
          path:'aaa', // A 组件
          component: resolve => require(['@/components/routerTab/A.vue'], resolve)
        },
        {
          path: 'bbb', // B 组件
          component: resolve => require(['@/components/routerTab/B.vue'],resolve)
        },
        {
          path: 'ccc', // C 组件
          component: resolve => require(['@/components/routerTab/C.vue'],resolve)
        }
      ]
    }

第三步: 设置路由跳转

  
    
    
      
        
        侧边栏
      
      
      A组件
      B组件
      C组件
    
  


export default {
  name:'aside'
}

第四步: 将所有组件整合 实现 点击时 加载对应组件

  
    
    
      
    
 
    
      
      
        
      
      
      
        
      
    
  


//  引入 头部组件 和 侧边栏组件
  import Vheader from "@/components/routerTab/header";
  import  Vaside from "@/components/routerTab/aside";
  export default {
    name: 'index',
    components: {
      Vheader,
      Vaside
    },
  }

  ————————————————

关于CSDN软件工程师能力认证

      CSDN软件工程师能力认证（以下简称C系列认证）是由中国软件开发者网CSDN制定并推出的一个能力认证标准。C系列认证历经近一年的实际线下调研、考察、迭代、测试，并梳理出软件工程师开发过程中所需的各项技术技能，结合企业招聘需求和人才应聘痛点，基于公开、透明、公正的原则，甑别人才时确保真实业务场景、全部上机实操、所有过程留痕、存档不可篡改。C系列认证的宗旨是让一流的技术人才凭真才实学进大厂拿高薪，同时为企业节约大量招聘与培养成本，使命是提升高校大学生的技术能力，为行业提供人才储备，为国家数字化战略贡献力量。

 

了解详情可点击：CSDN软件工程师能力认证介绍

原文链接：https://blog.csdn.net/bianliuzhu/article/details/83869544