Nuxt-link ，用于在Nuxt-child的父级中打开页面

Question

我正在使用类似于以下内容的NuxtJS页面设置：

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

在./pages/phones.vue-file 中，我正在使用<nuxt-child />组件来渲染其中的./pages/phones/index.vue和./pages/phones/details.vue。这样：

文件：./pages/phones.vue：

<nuxt-child />

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

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

但是nuxt链接"about"(链接到./pages/about.vue-page)仍然在nuxt-child(路由器视图)中打开。

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

<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/>