vue路由切换

 

 

看了 好多关于 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>