Vue.js 在路由器推送上重新渲染Vue组件

我已经创建了一个全局组件，可以跨多个路由共享。为了演示，我简化了下面的组件

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

每个页面都包含上面的组件，然后为

id=“area content

我注意到，当我从

• website.com/app/112（pages/app/\u appId.vue）

• website.com/app/11（pages/app/\u appId.vue）

我注意到，如果我将

区域包装器

移动到一个布局，那么它就可以工作了。问题是，该组件最终将与多个

应用程序

共享，但将具有不同的

，并且布局没有

插槽

我不知道为什么vue会重新呈现整个组件，即使它在所有页面之间共享，并且在每个页面上都是相同的

我错过了什么

如果这是预期的行为，我的问题是，我如何创建一个共享组件，它的行为就像我在多个页面中包含的布局一样，而不调整

道具

，并且不经常重新加载

+==更新====+

我一直在努力使嵌套路由正常工作，因为我相信这就是我所追求的。但是

numxt

没有正确地生成它们

根据文档（``），我需要将我的结构更改为

  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）或（使用Vue路由器）在应用程序中定义路由。没有它，您在更改URL时将重新加载整个页面（和应用程序）。

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

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) 

页面
_实体
消息传递
设置
index.vue
味精
index.vue
messageing.vue（错误-改回index.vue）->在此处添加组件
messaging.vue（需要移动到_实体文件夹以创建子项）

您可以添加一个

路由器链接

，并将website.com/app/112、website.com/app/xxx视为website.com/app/的子项。您能否详细介绍一下子项，因为这几乎是您想要的behavior@Varun我开始工作了，这就是解决方案！！！！！！！很高兴听到这个消息。如果你现在面临任何具体问题，请更新这个问题我明天再看。

...
{
  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"
}

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)