vue3 router-view怎么使用多个

在Vue3中，使用多个router-view非常简单。你可以在VueRouter中定义多个路由视图，然后在组件中使用它们。

例如，以下是一个包含两个路由视图的路由定义：

const routes = [
  {
    path: '/',
    components: {
      default: Home,
      sidebar: Sidebar
    }
  },
  {
    path: '/about',
    components: {
      default: About,
      sidebar: Sidebar
    }
  }
]

在这里，每个路由都有两个组件：一个默认组件和一个侧边栏组件。使用`components`属性而不是`component`属性来指定多个组件。

然后，你可以在组件中使用`router-view`指令来渲染这些组件。使用`name`属性来指定要渲染的命名视图。

例如，以下是一个使用两个命名视图的组件：

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

在这里，第一个`router-view`将渲染默认视图，而第二个`router-view`将渲染侧边栏视图。

这样，你就可以在同一个组件中使用多个路由视图。