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

【问题标题】：Vue components re-rendering on router pushVue 组件在路由器推送时重新渲染
【发布时间】：2020-02-16 07:06:20
【问题描述】：

我创建了一个全局组件，我在多个路由之间共享。出于演示目的，我已经简化了下面的组件。

#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/> 并且布局没有 @987654332 @

我不确定为什么 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"
}

【问题讨论】：

您可以添加 router-link 并将 website.com/app/112、website.com/app/xxx 视为 website.com/app/ 的子子级。
你能详细说明一下子孩子吗，因为这几乎是理想的行为
@Varun 我嵌套工作，这就是解决方案！！！！！！！！！
很高兴听到这个消息。如果您现在遇到任何具体问题，请更新问题，明天再看看。

标签： vue.js nuxt.js

【解决方案1】：

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

【讨论】：

【解决方案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)

【讨论】：