Question

我使用vue并对嵌套的子代有问题-这会导致父组件重新加载数据。这是我的嵌套子路线的示例：

{
  path: '/products',
  name: 'products',
  component: MainLayout,
  redirect: {name: 'product-edit'},
  children: [
    {
      path: '/products/edit/:id',
      name: 'product-edit',
      component: ComponentProduct,
      redirect: {name: 'product-summary'},
      children: [
        {
          path: 'summary',
          name: 'product-summary',
          component: ComponentSummary
        },
        {
          path: 'description',
          name: 'product-description',
          component: ComponentDescription
        },
        {
          path: 'elements',
          name: 'product-elements',
          component: ComponentElements,
          children: [
            {
              path: ':element',
              name: 'product-elements-id',
              component: ComponentElementsId,
            }
          ]
        }
      ]
    }
  ]
}

MainLayout

它仅使用<router-view :key="$route.params.id"></router-view>来显示实际元素页面。我使用这种构造，以避免在初次保存后重新加载的问题。示例：/ products / edit / 0->用户保存，获取响应并自动重定向到/ products / edit / 12（12是API中的新ID）。如果没有该密钥，它将无法正常工作，因为vue会使用旧数据缓存页面。

ComponentProduct

“容器”用于子页面。该组件加载产品数据（使用参数中的id）推送到vuex等。它还包括<router-view>，但带有<keep-alive>以避免重新加载已经使用的标签。

摘要和说明是带有一些数据的简单子页面。

ComponentElements

这是一个特殊的子页面，可加载产品的其他数据（元素）并列出它们。它还使用vuex获取数据。然后，用户可以单击列表上的元素以转到 ComponentElementsId

中的描述

但是...没关系。在“摘要”或“描述”中，它工作正常，但是如果我访问ComponentElements，则会导致父级重新加载数据：页面未完全重新加载，路由工作正常，但是为什么父级也被刷新了？我没有触摸ID，这对我来说很奇怪。

Vue-嵌套子路由导致重新加载父级

0 个答案: