vue布局组件(router-view)

网页中，很常见的是头部导航栏、底部链接、面包屑或者其他部分，在网站的每一个页面都会出现，并且样式统一
可以使用vue-router提供的router-view来构成一个布局组件，将头部导航栏、底部链接等写在页面上固定渲染，切换页面时，只切换中间内容部分
思路：
1、创建一个layout文件，放置一个router-view标签即可，每一个路由请求默认都是从这里进去跳转，这里是示例每个页面都带一个面包屑组件
（一般是app.vue，这里我自定义了一个）

//layout文件
<template>
  <div class="layout">
    <breadcrumbs></breadcrumbs>
    <router-view class="view"></router-view>
  </div>
</template>
<script>
import breadcrumbs from "@/pages/login/components/breadcrumbs";
export default {
  data() {
    return {};
  },
  components: {
    breadcrumbs,
  },
};
</script>
<style scoped lang="less">
</style>

2、创建主页面index，router-view相当于占位，而index就是页面首页，由首页进行跳转各页面，这里index就随便写点内容就好了（不用写layout中公共部分了）
3、如果有别的页面也是一样只写内容部分
4、router.js
注意：这里的所有文件都写在layout的children下，相当于访问/login路径，直接先加载layout中的内容，将layout 的router-view先替换为index的内容。再跳转别的页面也只是更换内容部分

const Service = [{
        path: "/login",
        component: () => import('@_src/pages/login/components/layout.vue'),
        children: [
            {
                path: "/",
                component: () => import('@_src/pages/login/index.vue'),
            },
            {
                path: "protocol",
                component: () => import('@_src/pages/login/protocol'),
            },
            {
                path: "bindPhone",
                component: () => import('@_src/pages/login/bindPhone'),
            },
        ]
    },


];
export default Service

router-view参考的此链接
涉及到路由跳转可参考此链接