unplugin-vue-router如何在同级展示多个视图

官网router可以同级展示多个命名视：有时候想同时 (同级) 展示多个视图，而不是嵌套展示，例如创建一个布局，有 sidebar (侧导航) 和 main (主内容) 两个视图，这个时候命名视图就派上用场了。你可以在界面中拥有多个单独命名的视图，而不是只有一个单独的出口。如果 router-view 没有设置名字，那么默认为 default。

template

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

js
const router = createRouter({
history: createWebHashHistory(),
routes: [
{
path: ‘/’,
components: {
default: Home,
// LeftSidebar: LeftSidebar 的缩写
LeftSidebar,
// 它们与 <router-view> 上的 name 属性匹配
RightSidebar,
},
},
],
})，

unplugin-vue-router如何实现同样功能？

慕圣9138571 2024-11-18

源自：Vue3项目框架搭建及响应式开发方案 1-1 章介绍

收起

2回答

Brian 2024-11-20 12:33:08

https://git.imooc.com/class-163/unplugin-vue-router-demo 代码

上面写错了，不是在layout里面创建

收起回答

Brian 2024-11-20 12:27:50

你来试试:

src/pages/
│   ├── default.vue         # 默认视图
│   ├── LeftSidebar.vue     # 左侧边栏
│   └── RightSidebar.vue    # 右侧边栏
└── Home.vue                # 主视图

然后在layout/default.vue中：

<template>
  <div>
    <router-view name="other" />
    <router-view name="LeftSidebar" />
    <router-view name="RightSidebar" />
  </div>
</template>

然后打印一下routes