命名式视图

2019-04-03  本文已影响0人  有一种感动叫做丶只有你懂

1.路由配置

假设我路由配置如下

[
  {
    path:'/home',
    component:Home,
    children:[{
        path:'/home/home-list',
        components:{
            default:HomeList,
            a:HomeAdd
        },{
            path:'/home/home-add',
            component:HomeAdd
          }
     }]
  }
]

2.在根路由下('/home')

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

3.在/home/home-list中的实际效果

可以显示HomeAdd里面的内容
//从路由配置中我们可以看出/home/home-list和/home/home-add是同级路由,但是我们在他们共同的根路由里面加了一个名字叫做a的router-view,并且在路由中增加了配置,所以当路由匹配到'/home/home-list'的时候HomeAdd这个组件也会被显示出来,显示出来的位置取决于在根路由里面的位置

上一篇 下一篇

猜你喜欢

热点阅读