Question

我在Vuejs中建立了一个项目构建，试图在Nuxt中重新创建。该项目包含一些静态页面，我只想从Nuxt的默认/ pages文件夹中加载这些页面，以利用Nuxt所做的SSR。对于“真实” SPA应用程序，我想覆盖默认路由器以添加元标题并从侧边栏加载动态组件。在我的Vuejs项目中，我做了以下工作：

https://jsfiddle.net/Mertakus/o3h0vq8t/41/

所以我有三个组成部分。 “侧边栏”，“ ConfigPanel”和“预览”组件。在侧边栏组件中，我遍历了<router-link>标记内的数组以启用用户导航，其中包含侧边栏项目的名称及其应呈现的路径。然后，在路由器中，我在侧栏中指定了应为不同路径加载的组件。

然后在ConfigPanel组件中，我将输出在路由器中使用{{ $route.meta.title }}指定的元标题。（我没有在jsfiddle中使用它，但是我想你明白了）。我在ConfigPanel.vue组件的末尾添加了<router-view>，以呈现给定路径的匹配组件。

好吧，那么到目前为止，我在Nuxt中尝试了什么？那么，我要做的第一件事就是覆盖给定路径的默认路由器，并指定组件en元标题，如下所示：

router: {
    linkActiveClass: 'active',
    extendRoutes(routes) {
      return [
        ...routes,
        {
          path: '/create/basic',
          component: '~/views/Basic.vue',
          meta: { title: 'Basic signature details' }
        },
      ]
    }
  },

在我的Sidebar.vue中，然后像这样循环遍历几乎与jsfiddle完全相同的数组：

<template>
    <div class="sidebar">
        <div class="sidebar__nav">
            <nuxt-link
                v-for="item in nav"
                :key="item.name"
                :to="item.path"
                tag="div"
                class="sidebar__nav-item"
            >
                {{ item.name }}</nuxt-link>
        </div>
    </div>
</template>

我试图在ConfigPanel.vue组件中输出元标题，如下所示：

<template>
    <div class="config-panel">
        <div class="config-panel__header">
            <h2>{{ $route.meta.title }}</h2>
        </div>
        <router-view />
    </div>
</template>

然后将Sidebar.vue和ConfigPanel.vue都加载到默认页面文件夹中包含的create.vue页面中。如果我直接转到“ localhost：3000 / create / basic”路径，它将加载组件和元标题，但补充工具栏会消失。在我的Vuejs项目中不是这种情况。因此，Nuxt的某些地方我显然还不了解，这是此行为的原因，但到目前为止，我似乎还找不到解决方案。任何帮助，将不胜感激。如果您需要更多信息，请随时询问。

预先感谢

Mertakus

_{此问题可在Nuxt社区（#c9604）上找到}

覆盖Nuxt路由器以显示动态组件并获得“元”属性

0 个答案: