javascript - vue-router:嵌套命名 View 问题。附加组件不可见

Question

我在 vue-router 文档中找到了这个例子:

https://jsfiddle.net/posva/22wgksa3/?fbclid=IwAR2WITnr6cmA_3rUgOCCvPrHASKfSW9QsvEKv4HrxBmuDUN1VmWSWufCtAI

const router = new VueRouter({
   mode: 'history',
   routes: [{ 
       path: '/settings',
       // You could also have named views at tho top
       component: UserSettings,
       children: [{
           path: 'emails',
           component: UserEmailsSubscriptions
           }, {
           path: 'profile',
           components: {
               default: UserProfile,
               helper: UserProfilePreview
           }
       }]
   }]
})

我试着做这样的事情:

https://jsfiddle.net/pt9o6h8e/

const router = new VueRouter({
   mode: 'history',
   routes: [{ 
       path: '/settings',
       components: {
           default: UserSettings,
           test: TestComponent
       }
       children: [{
           path: 'emails',
           component: UserEmailsSubscriptions
           }, {
           path: 'profile',
           components: {
               default: UserProfile,
               helper: UserProfilePreview
           }
       }]
   }]
})

但 TestComponent 不可见。为什么？

Answer 1

当你这样指定你的路线时，

{ 
  path: '/settings',
  // You could also have named views at tho top
  components: {
    default: UserSettings,
    test: TestComponent
  }
}

UserSettings和 TestComponent被认为是兄弟组件，所以在渲染时，它会寻找一个名为 router-view 的组件。在默认 router-view 旁边您在最顶层的 div 上指定的 #app .

However, you put <router-view name="test" /> inside UserSettings template so it didn't find the router-view to render TestComponent to.

要解决此问题，请移动 test路由器 View 来自 UserSettings到 #app .

<div id="app">
  <h1>Nested Named Views</h1>
  <router-view></router-view>
  <router-view name="test" class="us__content us__content--helper"/>
</div>

或者，如果你想把它放在里面 UserSettings , 通过移动 test: TestComponent 改变你声明它的方式在您的任何一个 child route 。

参见 working example .