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、如果有别的页面也是一样