命名视图

命名视图

命名视图和slot 一样就是具名插槽一样 ,给坑取名字,路由跳转到指定的插槽中

给坑取名字

<template>
  <div>
    <router-view name="top"></router-view>

    <hr>

    <router-view name="bottom"></router-view>

    <hr>

    <router-view></router-view>
  </div>
</template>

<script>
export default {}
</script>

在坑中填入对应路由

import Vue from 'vue'
import VueRouter from 'vue-router'

import PageA from './views/PageA.vue'
import PageB from './views/PageB.vue'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [
    {
      path: '/',
      // component: PageA
      components: {
        // key: value   key 坑名 value 组件

        top: PageA,
        bottom: PageB,

        default: PageA
      },
      //更换名字
      alias: '/hello'
    }
  ]
})