命名路由器视图

Question

我正在构建一个 Nuxt 应用程序，其布局由 3/4 主要内容和 1/4 侧边栏导航组成，该导航使用根据当前路线扩展的选项卡。

我的目标是本质上有两个路由器视图 - 一个在主页上，一个在每个选项卡中。

使用 Vue Router 我想这可以通过命名视图来实现，例如

<router-view name="rightSidebar"></router-view>

但显然 Nuxt 的想法是路由在幕后处理......所以不可能配置。

但是这样可以使用

<NuxtPage />

吗？

Answer 1

在 Nuxt3 中

对于命名路由器视图...

<NuxtPage>

组件有

name

属性；请参阅Nuxt 文档 - NuxtPage。如果您有很多路由器视图，这可能会很有用。

<NuxtPage :name="myViewName" />

---

对于命名路线，使用特殊的元...

在页面元数据中，有一些特殊的保留属性可以调用高级自适应。请参阅Nuxt 文档 - 页面特殊元数据。

在页面元数据中设置

name

属性：

pages/mypage.vue

definePageMeta({
    name: 'myCustomRouteName' // Gets passed to route object
    title: 'My Custom Page Title',
    
    // Custom meta like...
    myBreadcrumbTitle: 'Some Text Here' 
})

路线对象会变成这样：

{
    "name": "myCustomRouteName",
    "path": "mypage",
    "meta": {
      "title": "My Custom Page Title",
      "myBreadcrumbTitle": "Some Text Here"
    },
    "alias": []
}

你可以做这样的事情：

渲染

<NuxtLink>

的名字...

<NuxtLink :to="{ name: 'myCustomRouteName'}">
    My link text
</NuxtLink>

...以编程方式调用路线...

function navigate(){
    return navigateTo({
        name: 'myCustomRouteName'
    })
}

或构建面包屑组件等...

Answer 2

Nuxt.js 不支持

router-view

。但是，您可以使用

NuxtPage

内置组件。请记住，它仅在您尝试嵌套的页面已添加到

pages

目录中后才有效。

这里是 Nuxt 文档中对其概述的链接。

Answer 3

我只能找到一种方法来使用 Nuxt 3 中的 NuxtPage 组件来使用 命名视图。您需要设置 自定义路由。

在您的项目中添加一个名为

app/router.options.ts

的文件。 （我不知道为什么它需要位于名为

app

的文件夹中，除了文档是这么说的。）在该文件内部，您可以调整现有路线，并将

component: PageComponent

替换为

components: {default: PageComponent, foo: SomeComponent, bar: AnotherComponent}

。

以下示例。如果您需要更多示例，请在评论中询问。

示例1：为特定路线添加工具栏：

import { RouterConfig } from "@nuxt/schema";

export default <RouterConfig>{
  routes: (routes) => {
    return routes
      .map((route) => {
        const name = String(route.name);

        if (name.startsWith("test-withToolbar")) {
          return {
            ...route,
            component: undefined,
            components: {
              default: route.component, // This is a component from the `pages` folder. Use it with `NuxtPage`.
              toolbar: () => import("~/toolbars/MyToolbar.vue"), // Use this with `NuxtPage(name="toolbar")`.
            },
          };
        }

        return route;
      });
  },
};

然后在

app.vue

（或者在布局文件中，如果你想使用布局），你可以有这个模板（为了简洁，我使用 Pug 语法而不是 HTML）：

div
  NuxtPage(name="toolbar")
  NuxtPage

示例2：按路径自动添加工具栏和页脚

也许我们想要一个

toolbars

文件夹，其行为与

pages

文件夹类似。然后我们可以在

app/router.options.ts

中做类似的事情：

import type { RouterConfig } from "@nuxt/schema";
import { readdirSync } from "fs";
import type { Component } from "@vue/runtime-core";

export default <RouterConfig>{
  routes: (routes) => {
    const toolbarNames = readdirSync("./toolbars").map((name) =>
      name.replace(/\.vue$/, "")
    );

    return routes.map((route) => {
      const name = String(route.name);

      if (!route.component) {
        return route;
      }

      const components: Record<string, Component> = {
        default: route.component,
      };

      if (toolbarNames.includes(name)) {
        components.toolbar = () => import(`~/toolbars/${name}.vue`);
      }

      return {
        ...route,
        component: undefined,
        components,
      };
    });
  },
};

这允许您在每个页面上拥有不同的工具栏，同时使用相同的布局，例如：

div
  NuxtPage(name="toolbar")
  NuxtPage

示例 3：使用页面元数据指定路由组件

我的想法是使用

definePageMeta

宏 将元数据添加到

pages

文件夹中的组件，然后在

app/router.options.ts

中使用它来添加其他组件。然而，当

definePageMeta

存在时，似乎

app/router.options.ts

会被忽略或覆盖。请参阅https://github.com/nuxt/nuxt/discussions/19700。如果我找到办法做到这一点，我会更新这个答案。