vue header+main布局，路由在main中跳转

1、编写header组件，两个按钮对应两个路由跳转

<template>
  <div class="z-header">
    <button @click="redirect('/p1')">菜单1</button>
    <button @click="redirect('/p2')">菜单2</button>
  </div>
</template>

<script>
export default {
name: "Header",
  methods:{
    redirect(path){
      this.$router.push({path:path})
    }
  }
}
</script>

<style scoped>
.z-header {
  height: 100px;
  width: 100%;
  background-color: rosybrown;
}
</style>

2、编写两个路由菜单

<template>
  <div>
    <h1>菜单1</h1>
    <button>菜单1</button>
    <input/>
  </div>
</template>

<script>
export default {
  name: "path1"
}
</script>

<style scoped>

</style>

<template>
  <div>
    <h1>菜单2</h1>
    <button>菜单2</button>
    <input/>
  </div>
</template>

<script>
export default {
  name: "path2"
}
</script>

<style scoped>

</style>

3、编写Home组件，引入Header和router-view

<template>
  <div class="home">
    <Header></Header>
    <router-view></router-view>
  </div>
</template>

<script>
import Header from "@/components/Header";
export default {
  name: 'Home',
  components: {
    Header
  }
}
</script>

4、router文件中index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home,
        children:[]  //组件中子路由跳转,可以直接把子路由写在这，
    }
]

const router = new VueRouter({
    routes
})

export default router

项目中的页面可能会有很多，分别放在不同的文件夹，可以在放置页面的文件夹中新建index.js来push进children，如下图所示

index.js

export default {
    install(Vue, router) {
        router.options.routes[0].children.push(//routes[0]代表router文件中index.js中的第一个路由
            {
                path:'/p1',
                name:'p1',
                component: () => import('../views/path1.vue')
            },
            {
                path:'/p2',
                name:'p2',
                component: () => import('../views/path2.vue')
            }
        );
        router.addRoutes(router.options.routes);
    }
};

此时这个js文件是不生效的，需要在main.js中配置

import views from '../src/views';
Vue.use(views, router);

绑定router之后才可生效
5、效果图
'/'路由所示页面

点击菜单1进入菜单1页面