vue-router从入门到精通之命名视图(四)

应用场景,当我们想同时展示多个视图,而不是嵌套展示。如:sidebar(侧导航)和main(主内容)两个视图,这个时候命名视图就派上用场了。我们可以在界面中拥有多个单独命名的视图,而不是只有一个单独的出口。如果router-view没有设置名字,那么默认为default

    
    
    

一个视图使用一个组件渲染,因此对于同个路由,多个视图就需要多个组件,router配置如下:

{
    path: '/',
    components: {
      default: children1,
      a: children2,
      b: children3
    }
  }

这里需要注意的是:components这个单词是有加s的,代表组。

当然,命名视图也可以在嵌套中使用,在about组件中

    
    

在router实例化配置中

{
    path: '/about',
    component: about,
    children: [{
      path: '/children1',
      component: children1
    },
    {
      path: '/children2',
      component: children2
    },
    {
      path: '/children3',
      components: {
        default: children3,
        a: children1,
        b: children2
      }
    }
    ]
  }

你可能感兴趣的:(vue-router)