渲染默認子 vue-router 4

Question

我想問一下渲染默認子視圖。 我知道存在類似問題的主題，但我很確定它適用於 VUE2 和較舊的 vue-router。 我在呈現視圖類別的默認子項時遇到問題。 當我將 go 設置為<router-link:to="{ name: routeName, params: { category: item.id } }除了<router-view />之外，一切都呈現正常，它是空的...

我想出了一個使用 beforeUpdate(),beforeCreate() 的解決方案，但這似乎是在重新發明輪子。 如果我 go 到 /category/{id} 然后到 /category/{id}/room/{id} 和 go 后一頁，默認視圖將呈現

轉到 /category/{id} 后如何使默認子負載？

路由器.js

{
  path: '/category/:category',
  name: 'Category',
  props: true,
  component: Category,
  children: [
    {
      path: '',
      name: 'FavouriteDevicesInCategory',
      component: Devices,
      props: true,
    },
    {
      path: 'room/:room',
      name: 'Devices',
      component: Devices,
      props: true,
    },
  ],
},

Category.vue - 查看

<template>
  <div class="control">
    <div class="left">
      [...]
    </div>
    <div class="right">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  props: ['category', 'room'],
  /** generate default router-view */
  beforeUpdate() {
    this.$router.push('');
  },
  beforeCreate() {
    this.$router.push('');
  },
};

Answer 1

如果你的默認組件是Category ，你必須像這樣創建路由：

{
  path: '/category',
  name: 'Category',
  props: true,
  component: Category,
  children: [
    {
      path: '/:categoryId',
      name: 'FavouriteDevicesInCategory',
      component: Devices,
      props: true,
    },
    {
      path: 'room/:roomId',
      name: 'Devices',
      component: Devices,
      props: true,
    },
  ],
},

默認情況下，它將呈現Category組件，如果您將id添加到 url 它將 go Devices組件

Answer 2

我想我找到了一個解決方案，有點亂，但它似乎是這個問題的最佳解決方案

{
  path: '/category/:category',
  // name: 'Category',
  props: true,
  component: Category,
  children: [
    {
      path: '',
      name: 'Category',
      component: Devices,
      props: true,
    },
    {
      path: 'room/:room',
      name: 'Devices',
      component: Devices,
      props: true,
    },
  ],
},