我正在构建一个Nuxt应用程序,其布局由3/4的主要内容和1/4的侧边栏导航组成,侧边栏导航使用基于当前路线扩展的标签。我的目标是基本上有两个路由器视图-一个在主页上,一个在每个选项卡。使用Vue Router,我想这可以通过命名视图来实现,例如。
<router-view name="rightSidebar"></router-view>
但显然,Nuxt的想法是,路由是在幕后处理的......所以不可能配置。但是,是否可以以这种方式使用<NuxtPage />呢?
<NuxtPage />
7uzetpgm1#
Nuxt.js不支持router-view。但是,您可以使用NuxtPage内置组件。只需记住,它仅在您尝试嵌套的页面已添加到pages目录中后才起作用。这里是一个link从Nuxt文档概述它。
router-view
NuxtPage
pages
2w2cym1i2#
<NuxtPage>组件具有name属性;请参阅Nuxt docs - NuxtPage。我想,如果你有很多路由器视图,这可能会很有用。
<NuxtPage>
name
<NuxtPage :name="myViewName" />
在页面 meta中,有一些特殊的保留属性可以调用高级适配。参见Nuxt docs - Pages Special Metadata。
在页面 meta设置name属性:pages/mypage.vue
definePageMeta({ name: 'myCustomRouteName' // Gets passed to route object title: 'My Custom Page Title', // Custom meta like... myBreadcrumbTitle: 'Some Text Here' })
route对象会变成这样:
{ "name": "myCustomRouteName", "path": "mypage", "meta": { "title": "My Custom Page Title", "myBreadcrumbTitle": "Some Text Here" }, "alias": [] }
你可以这样做
按名称渲染<NuxtLink>:
<NuxtLink>
<NuxtLink :to="{ name: 'myCustomRouteName'}"> My link text </NuxtLink>
以编程方式调用a路由:
function navigate(){ return navigateTo({ name: 'myCustomRouteName' }) }
构建一个面包屑组件,等等。
2条答案
按热度按时间7uzetpgm1#
Nuxt.js不支持
router-view
。但是,您可以使用NuxtPage
内置组件。只需记住,它仅在您尝试嵌套的页面已添加到pages
目录中后才起作用。这里是一个link从Nuxt文档概述它。
2w2cym1i2#
在Nuxt 3中
对于 * 命名路由器视图 *...
<NuxtPage>
组件具有name
属性;请参阅Nuxt docs - NuxtPage。我想,如果你有很多路由器视图,这可能会很有用。对于 * 命名路由 *,使用特殊 meta...
在页面 meta中,有一些特殊的保留属性可以调用高级适配。参见Nuxt docs - Pages Special Metadata。
在页面 meta设置
name
属性:pages/mypage.vue
route对象会变成这样:
你可以这样做
按名称渲染
<NuxtLink>
:以编程方式调用a路由:
构建一个面包屑组件,等等。