看了 好多關於 vue 路由切換的文章 都不太理想 , 自己花了點時間 研究下vue的路由切換僅供大家參考,這個案例使用element-ui+vue-router實現

整體效果:

第一步

<!-- 在 components 目錄下建立建立 routerTab 資料夾 -->
<!-- 在 routerTab 目錄下建立 A.vue,B.vue,C.vue 三個元件 -->
<!-- 在 routerTab 目錄下建立 index.vue -->
<!-- 在 routerTab 目錄下建立 header.vue -->
<!-- 在 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>