Day33 - 同一个路径载入两个页面元件

如果我们想要在 App.vue 执行两个 <router-view> 是否可行 ?
答案是可以的

我们先到 App.vue 在原先的 <router-view> 外围增加一个 .container 来增加最大宽的限制，之后在外面也新增一个 <router-view> 并给予 name 属性:

<template>    <div id="app">        <nav>...</nav>        <router-view name="menu"></router-view>        <div class="container">            <router-view></router-view>        </div>    </div></template>

接着我们把 page.vue 另存新档成 menu.vue
在 page.vue 留下:

<template>    <div class="hello">        <div class="card" style="width: 18rem;">            <router-view></router-view>        </div>    </div></template>

在 menu.vue 留下:

<template>    <div class="hello">        <ul class="nav">            <li class="nav-item">                <router-link class="nav-link" to="/page">卡片1</router-link>            </li>            <li class="nav-item">                <router-link class="nav-link" to="/page/child2">卡片2</router-link>            </li>            <li class="nav-item">                <router-link class="nav-link" to="/page/child3">卡片3</router-link>            </li>        </ul>    </div></template>

这样做的用意，是本来在 page 下的卡片选单移到 menu.vue 去，且只有在 page 页下会呈现
接着我们回到 router/index.js 载入 menu.vue

import Menu from '@/components/page/menu'

接着在下方的 export 的 page 元件路径修改一下，主要把 component 改成 components 可以用物件的型式挂载多个元件:

export default new VueRouter({    routes: [        {            name: '首页',            path: '/index',            component: Home,        },        {            name: '分页',            path: '/page',            components: {                default: Page,                menu: Menu,            },            children: [                {                    name: 'child 1',                    path: '',                       component: child1,                },                {                    name: 'child 2',                    path: 'child2',                       component: child2,                },                {                    name: 'child 3',                    path: 'child3',                       component: child3,                }            ],        }    ]});

而 components 物件内的属性的 default 是预设的元件内容，menu 则是我们刚刚把第二个 <router-view> 取名的 name 属性，挂载的元件就是刚刚製作的 menu.vue
这样就可以达到我们所希望的效果了