时间戳

首页 > 解决方案 > VueJS/Nuxt：this.$router.push 返回不同的（错误的）模板

javascript - VueJS/Nuxt：this.$router.push 返回不同的（错误的）模板

问题描述

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

导航<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);
}

标签： javascriptvue.jsvue-routernuxt.js

解决方案

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

不过，据记录，两者都this.$route.push运行window.location.href良好。

很抱歉所有试图提供帮助的人，我很感激你让我找到解决方案，无论多么间接！

推荐阅读