Question

我正在使用与此类似的 NuxtJS 页面 设置：

./pages/about.vue
./pages/phones/index.vue
./pages/phones/details.vue
./pages/phones.vue

在 ./pages/phones.vue 文件中，我使用 <nuxt-child /> 组件来呈现其中的 ./pages/phones/index.vue 和 ./pages/phones/details.vue。像这样：

文件：./pages/phones.vue：

<nuxt-child />

在 ./pages/phones/details.vue 页面内，我有一个链接需要打开 "parent" ./pages/about.vue（正常的 NuxtJS 路由器视图）中的 <Nuxt /> ) 不是 <nuxt-child /> 路由器视图。

这类似于老式 iframe 使用 target="_parent" 属性在其父级中打开 URL 的方式。

但是 nuxt-link “about”（链接到 ./pages/about.vue -page）仍在 nuxt-child（路由器视图）中打开。

我认为它们应该是 target 组件上的某种 <nuxt-link> 属性：

<nuxt-link :to="{ name: 'about', target: '_parent' }">About</nuxt-link>

注意：上面的例子不起作用。我正在寻找这样的东西。

我在网上搜索过；但是，如何从 <nuxt-child /> 中打开一个链接到父 <Nuxt />（路由器）视图？

Answer 1

也许您可以使用自定义 <nuxt/> 组件作为 <custom-nuxt/>，如下所示：

<template>
    <main>
        <transition
            mode="out-in"
            name="page"/>
            <router-view v-if="!nuxt.err"/>
            <error-view :error="nuxt.err" v-else/>
        </transition>
    </main>
</template>
<script type="text/javascript">
import Vue from 'vue';
import ErrorView from '@/layouts/error';
export default{
    components: {
        ErrorView
    },
    beforeCreate () {
        Vue.util.defineReactive(this, 'nuxt', this.$root.$options.nuxt);
    }
}
</script>

使用它代替 <nuxt/>，并将 <nuxt-link/> 替换为 <router-link/>，代码就像您在 SPA-Vue 项目中所做的一样。不要忘记编写您自己的 <error-view/>

在nuxt-child的父级中打开页面的nuxt-link

1 个答案: