Question

我创建了一个全局组件，可以在多条路线中共享。我已简化了以下组件以进行演示。

#name area-wrapper
<template>
<div id="area">
    <div id="area-menu">
        <menu/>
    </div>
    <div id="area-content">
        <slot/>
    </div>
</div>
</template>

菜单中的导航栏具有一些选项，这些选项将更改slot的内容，而我可以将其转换为component v-bind:is组件。

我所做的是为路由创建了多个页面

  pages
    _entity <--*** forgot to include this ***
      app
        index.vue
        _appId.vue
        new.vue

这些页面的每个页面都包含上面的组件，然后为id="area-content添加自己的内容

我注意到的是，当我离开时，整个area-wrapper正在重新加载

website.com/app/112 (pages/app/_appId.vue)
website.com/app/11 (pages/app/_appId.vue)

我注意到，如果我将area-wrapper移至布局，那么它的工作原理是该组件最终将与多个apps共享，但将具有不同的<menu/>和版面没有slots

我不确定为什么vue重新渲染了整个组件，即使它在所有页面之间共享并且在每个页面上都是相同的。

我在这里想念什么？

如果这是预期的行为，那么我的问题就变成了，如何在不调整props且不不断重新加载的情况下，创建一个共享组件，该组件的行为类似于我在多个页面中包含的布局

+ ====更新==== +

我一直试图使嵌套路由正常工作，因为我相信这就是我追求的目标。但是nuxt无法正确生成它们

根据说明文件（``），我需要将学习结构更改为

  pages
    _entity
      messaging
        settings
          index.vue
        msg
          index.vue
        messaging.vue(wrong - changed back to index.vue) -> within here add the <nuxt-child> component 
      messaging.vue(need to move to _entity folder to create children)

nuxt应该创建子组件。但是，它仍在继续创建完整路线。我正在使用nuxt-i18n会导致问题吗？

路线

...
{
  path: "/:entity/messaging/messaging",
  component: _8a865700,
  name: "entity-messaging-messaging___en"
}, {
  path: "/:entity/messaging/:msg?",
  component: _1ef926cc,
  name: "entity-messaging-msg___en"
}, {
  path: "/:entity/messaging/settings",
  component: _7b358e6a,
  name: "entity-messaging-settings___en"
}

Answer 1

您应按照建议的here（纯Vue）或here（使用vue-router）在应用中定义路由。如果没有它，则在更改URL时将重新加载整个页面（和应用程序）。

Answer 2

我最初是在文件夹中创建嵌套路由，而是需要将父页面放在文件夹所在目录的根目录中。

pages
 _entity
  messaging
    settings
      index.vue
    msg
      index.vue
    messaging.vue(wrong - changed back to index.vue) -> within here add the <nuxt-child> component 
  messaging.vue(need to move to _entity folder to create children)

在路由器推送时重新渲染Vue组件

2 个答案: