【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 组件 

<template>
  <div>
   A 组件
  </div>
</template>
<script>
export default {
  name:"AComponent"
}
</script>
<style>
 
</style>
 

 

<template>
  <div>
    B 组件
  </div>
</template>
<script>
export default {
  name:"BComponent"
}
</script>
<style>
 
</style>
 

 

<template>
  <div>
    C 组件
  </div>
</template>
<script>
export default {
  name:"CComponent"
}
</script>
<style>
 
</style>
 

 

<template>
 <h1 style="text-align:center"> 头部组件 </h1>
</template>
<script>
export default {
  name:'header'
}
</script>
<style>
 
</style>

第二步: 配置路由 , 在 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)
        }
      ]
    }

第三步: 设置路由跳转

<template>
  <el-menu
    default-active="2"
    :router="true">
    <!-- :router="true" 表示 启用 路由 所以 el-menu-item 中的 index 表示路由要切换到的页面  -->
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-menu"></i>
        <span>侧边栏</span>
      </template>
      <!-- 这里 的 index 代表 要去的路由  -->
      <el-menu-item index="/index/aaa">A组件</el-menu-item>
      <el-menu-item index="/index/bbb">B组件</el-menu-item>
      <el-menu-item index="/index/ccc">C组件</el-menu-item>
    </el-submenu>
  </el-menu>
</template>
<script>
export default {
  name:'aside'
}
</script>
<style></style>

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

<template>
<!--  这里使用 element-ui 布局 -->
  <el-container>
    <!-- 头部 -->
    <el-header>
      <Vheader></Vheader>
    </el-header>
 
    <el-container>
      <!-- 侧边栏 -->
      <el-aside width="200px">
        <Vaside></Vaside>
      </el-aside>
      <el-main>
      <!-- 主体 也是 点击侧边栏中选项 加载对应组件 -->
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
//  引入 头部组件 和 侧边栏组件
  import Vheader from "@/components/routerTab/header";
  import  Vaside from "@/components/routerTab/aside";
  export default {
    name: 'index',
    components: {
      Vheader,
      Vaside
    },
  }
</script>
<style>
</style>

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

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

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

 

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

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