vue命名视图的使用

场景：

在 vue 开发中，有一些可复用的重要组件，比如 head 头部或者侧边栏等，在大部分主要内容页，这些组件都是需要使用的，而在 login 页面或者 404 页面这些非主内容页面是不需要的，实现这些需求有很多种思路，这里利用VueRouter 的命名视图来实现一下。

代码：

router/index.js

const routes = [
    {
        path: '/',
        components:{
            default:()=>import('../view/Main.vue'),
            head:()=>import('../components/Head.vue'),
            left:()=>import('../components/Left.vue'),
            foot:()=>import('../components/Footer.vue')
        }

    },
    {
        path: '/login',
        component: () => import('../view/Login.vue')
    },
]

App.vue

<template>
  <router-view name="head"></router-view>
  <router-view name="left"></router-view>
  <router-view></router-view>
  <router-view name="foot"></router-view>
</template>

==这里主要是记录一下命名视图的用法，实际开发中不一定要这样写==