Nuxt - 在组件内使用 router.push 未正确更改页面

Question

index.vue -

<template>
<div>
    <Header />
    <div class="container">
        <SearchForm />
    </div>
</div>
</template>

<script>
const Cookie = process.client ? require('js-cookie') : undefined

export default {
    data() {
        return {
            form: {
                email: '',
                password: ''
            },
            show: true
        }
    },
    methods: {
        logout() {
            // Code will also be required to invalidate the JWT Cookie on external API
            Cookie.remove('auth')
            this.$store.commit('setAuth', {
                auth: null,
                user_type: null
            })
        }
    }
}
</script>

<style>
.container {
    /* margin: 0 auto; */
    /* min-height: 100vh; */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

</style>  

jobs.vue -

<template>
<div>
    <Header />
    <SearchForm />
    <b-container class="main_container">
        <b-row>
        <h1> Results for "{{q}}"</h1>
        </b-row>
        <b-row>
        <ul id="array-rendering">
            <li v-for="item in results" :key="item.job_id">
                {{ item.job_title }}
                {{ item.job_city }}
                {{ item.job_state }}
                {{ item.job_work_remote }}
            </li>
        </ul>
        </b-row>
    </b-container>
</div>
</template>

<script>
const Cookie = process.client ? require('js-cookie') : undefined
export default {
    // middleware: 'notAuthenticated',
    watchQuery: ['q'],
    data() {
        return {
            q: null,
            results: []
        }
    },
    async fetch() {
        this.q = this.$route.query.q
        this.results = await this.$axios.$get('/api/job/search', {
            params: {
                keyword: this.q,
            }
        })
    },

    methods: {

    }
}
</script>

<style>
.container {
    align-items: center;
    text-align: center;
}
</style>

SearchForm.vue 组件 -

<template>
<div id='searchFormDiv'>
    <b-form inline @submit.prevent="onSubmit">
        <label class="sr-only" for="inline-form-input-name"> keyword</label>
        <b-form-input v-model="form.keyword" id="inline-form-input-name" class="mb-2 mr-sm-2 mb-sm-0" placeholder="Job title or keyword" size="lg"></b-form-input>

        <label class="sr-only" for="inline-form-input-username">location</label>
        <b-input-group class="mb-2 mr-sm-2 mb-sm-0">
            <b-form-input v-model="form.location" id="inline-form-input-username" size="lg" placeholder="City, state or zip"></b-form-input>
        </b-input-group>

        <b-button type="submit" variant="primary">Find Jobs</b-button>
    </b-form>

</div>
</template>

<script>
import {
    BIconSearch,
    BIconGeoAlt
} from 'bootstrap-vue'

export default {
    data() {
        return {
            form: {
                keyword: '',
                location: ''
            }
        }
    }, 
    created () {
        this.form.keyword = this.$route.query.q
    },
    methods: {
        onSubmit() {
            this.$router.push({
                path: 'jobs',
                query: {
                    q: this.form.keyword
                }
            });
        }
    },
    components: {
        BIconSearch,
        BIconGeoAlt
    },
}
</script>

<style>
#searchFormDiv {
    margin-top: 50px
}
</style>

“http://localhost:3000/”的路由返回index.vue页面。

在这个 vue 页面中，我有一个带有搜索表单的组件。完成这些表格并点击搜索按钮后，它将重定向到结果页面

如果 this.form.keyword = "Data"，下一个 URL 将是“http://localhost:3000/jobs?q=Data”，它将使用 jobs.vue 页面。

我遇到的问题是 CSS 没有从 jobs.vue 页面加载。由于某种原因，它仍然来自index.vue 页面。如果我刷新页面，则来自jobs.vue 的 CSS 正在加载。我需要在初始重定向时从 jobs.vue 加载 CSS。所有查询数据都按预期工作，这是一个加分项。

但是，出于某种原因，从 index.vue 应用了以下 CSS，而不是 jobs.vue 页面中的 CSS -

display: flex;
justify-content: center;

有人知道这里发生了什么吗？此应用是 SSR 而非 SPA。

Answer 1

这解决了问题-

methods: {
    onSubmit() {
        window.location = 'http://localhost:3000/jobs?q=' + this.form.keyword;
    }
},

Answer 2

您必须使用 scoped 指令将 CSS 从 index.vue 页面扩展到其他页面（请参阅文档 https://vue-loader.vuejs.org/guide/scoped-css.html）

<style scoped>
/* local styles */
</style>

<style>
/* global styles */
</style>

您可以在 layouts/default.vue 文件中添加全局 CSS。