Vue 路由切换

//app.vue

  <div id="appHome">
    <div class="top">
      <router-link to="/home/index">header</router-link>
    </div>
    <div class="inner">
      <router-view />
    </div>
  </div>

import Vue from 'vue'
import Router from 'vue-router'
import routes from './routers'

Vue.use(Router)

export default new Router({
  routes: routes.routes
})


routers.js



export default{
    routes: [
        {
            path: '/',
            name: 'index',
            meta: {title: '主页'},
            component: () => import('@/views/index.vue'),
        },
        {
            path: '/home/index',
            name: 'home',
            meta: {title: '主页'},
            component: () => import('@/views/home/index.vue'),
            children: [
                {
                  path: '/home/header',
                  name: 'header',
                  meta: {title: '主页'},
                  component: () => import('@/views/home/header.vue'),
                },
                {
                    path: '/home/header2',
                    name: 'header2',
                    meta: {title: '主页'},
                    component: () => import('@/views/home/header2.vue'),
                  },
            ]
        },

         
      ]
}