0
点赞
收藏
分享

微信扫一扫

小满Router(第六章-命名视图)

伊人幽梦 2022-03-22 阅读 58

命名视图可以在同一级(同一个组件)中展示更多的路由视图,而不是嵌套显示。 命名视图可以让一个组件中具有多个路由渲染出口,这对于一些特定的布局组件非常有用。 命名视图的概念非常类似于“具名插槽”,并且视图的默认名称也是 default

一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'


const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        components: {
            default: () => import('../components/layout/menu.vue'),
            header: () => import('../components/layout/header.vue'),
            content: () => import('../components/layout/content.vue'),
        }
    },
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

对应Router-view 通过name 对应组件

    <div>
        <router-view></router-view>
        <router-view name="header"></router-view>
        <router-view name="content"></router-view>
    </div>
举报

相关推荐

第六章 容器

第六章:接口

第六章总结

PTA第六章

第六章 BOM

java第六章总结

第六章、FOR、IF和while

0 条评论