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

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

第三步: 设置路由跳转

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