vue 命名视图

最新推荐文章于 2025-06-02 09:03:53 发布

weixin_30549657

最新推荐文章于 2025-06-02 09:03:53 发布

阅读量123

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/avon/p/6178088.html

本文介绍如何在Vue中使用命名视图来实现多个视图的同时展示，而非传统的嵌套展示方式。通过具体示例展示了如何配置路由及组件以支持命名视图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

命名视图

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

<router-view class="view one"></router-view> <router-view class="view two" name="a"></router-view> <router-view class="view three" name="b"></router-view>

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

const router = new VueRouter({
  routes: [
    {
      path: '/',
      components: {
        default: Foo,
        a: Bar,
        b: Baz
      }
    }
  ]
})

以上案例相关的可运行代码，在这里.

转载于:https://www.cnblogs.com/avon/p/6178088.html