Question

我正在研究一个搜索组件，该组件采用选择框的值，并将用户重定向到适当的页面。但是我注意到页面渲染时，它调用了错误的模板，因此没有显示内容。

通过<nuxt-link>进行导航确实会返回正确的模板。

我希望$router.push呈现与<nuxt-link>相同的模板。我该如何实现？

下面的相关代码...

模板

<template>
    <section class="search" role="search" aria-label="Search">
        <div class="form-group" v-if="searchReady">
            <span class="option-group">
                <label for="visitortype">I am a</label>
                <select v-model="visitor" :searchable="false" :onChange="getData(visitor)">
                    <option v-for="(v, index) in typesVisitor" :key="index">{{ v.name }}</option>
                </select>
            </span>
            <span class="option-group">
                <label for="experiencetype">looking for</label>
                <select label="name" v-model="experience.name" :searchable="false" :onChange="setExperience(experience)">
                    <option v-for="(x, index) in typesExperience" :key="index">{{ x.name }}</option>
                </select>
            </span>
        </div>
        <button class="button" @click="loadExperience">Show Me</button>
    </section>
</template>

脚本

loadExperience() {
    // Redirect to experience page (e.g. '/dir/page')
    this.$router.push(this.searchDestination);
}

Answer 1

因此，事实证明我的数据Feed中包含错误的信息，这就是为什么加载错误的模板的原因。 VueJS / Nuxt足够聪明，可以创建没有基于路由的内容的页面，这让我感到困惑。

不过，根据记录，zs和ts++ds的表现都一样好。

对不起，每个尝试提供帮助的人，我都很感谢您以间接的方式获得解决方案！

VueJS / Nuxt：this。$ router.push将不同的（错误的）模板返回到<nuxt-link>

1 个答案: