vue.js 命名路由器视图

oiopk7p5  于 2023-04-21  发布在  Vue.js
关注(0)|答案(2)|浏览(213)

我正在构建一个Nuxt应用程序,其布局由3/4的主要内容和1/4的侧边栏导航组成,侧边栏导航使用基于当前路线扩展的标签。
我的目标是基本上有两个路由器视图-一个在主页上,一个在每个选项卡。
使用Vue Router,我想这可以通过命名视图来实现,例如。

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

但显然,Nuxt的想法是,路由是在幕后处理的......所以不可能配置。
但是,是否可以以这种方式使用<NuxtPage />呢?

7uzetpgm

7uzetpgm1#

Nuxt.js不支持router-view。但是,您可以使用NuxtPage内置组件。只需记住,它仅在您尝试嵌套的页面已添加到pages目录中后才起作用。
这里是一个link从Nuxt文档概述它。

2w2cym1i

2w2cym1i2#

在Nuxt 3中

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

<NuxtPage>组件具有name属性;请参阅Nuxt docs - NuxtPage。我想,如果你有很多路由器视图,这可能会很有用。

<NuxtPage :name="myViewName" />

对于 * 命名路由 *,使用特殊 meta...

在页面 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 :to="{ name: 'myCustomRouteName'}">
    My link text
</NuxtLink>

以编程方式调用a路由:

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

构建一个面包屑组件,等等。

相关问题