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

  1. <router-view class="view one"></router-view>
  2. <router-view class="view two" name="a"></router-view>
  3. <router-view class="view three" name="b"></router-view>

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

  1. const router = new VueRouter({
  2.     routes:[
  3.     {path:'/',
  4.      components:{
  5.        default:Foo,
  6.        a:Bar,
  7.        b:Baz
  8.      }
  9.   ]
  10. })

嵌套命名视图

我们也有可能使用命名视图创建嵌套视图的复杂布局。这时你也需要命名用到的嵌套 router-view 组件。我们以一个设置面板为例:

  1. / settings/emails                                                                                / settings/profile
  2. +-----------------------------------+                                        +------------------------------+
  3. | UserSettings                                            |                                        |    UserSettings                                  |
  4. | +-----+-------------------------+    |                                        |    +-----+--------------------+ |
  5. | | Nav | YserEnauksSubScriptions    |    |        +---------->        |    |    Nav | UserProfile                 | |
  6. |    |            +-------------------------+    |                                        |    |            +--------------------+ |
  7. |    |            |                                                    |    |                                        |    |            |    UserProfilePreview | |
  8. |    +-------------------------------+    |                                        |    +--------------------------+ |    
  9. +-----------------------------------+                                        +------------------------------+
  • Nav 只是一个常规组件
  • UserSettings 是一个视图组件。
  • UserEmailsSubscriptions、UserProfile、UserProfilePreview 是嵌套的视图组件

注意：我们先忘记 HTML/CSS 具体布局的样子，只专注在用到的组件上。

UserSettings 组件的