Essa é uma decisão difícil, considerando o pouco que sabemos sobre o que está ocorrendo em sua rota de carregamento.
Mas...
Eu nunca tive a necessidade de criar uma rota de carregamento, apenas carregando componentes que são renderizados em várias rotas durante o estágio de coleta de dados / init.
Um argumento para não ter uma rota de carregamento seria que um usuário poderia navegar diretamente diretamente para esse URL (acidentalmente) e, em seguida, parece que não teria contexto suficiente para saber para onde enviar o usuário ou que ação tomar. Embora isso possa significar que ele cai em uma rota de erro neste momento. No geral, não é uma ótima experiência.
Outra é que, se você simplificar suas rotas, a navegação entre rotas se torna muito mais simples e se comporta como esperado / desejado sem o uso de $router.replace
.
Entendo que isso não resolve a questão da maneira que você está perguntando. Mas eu sugiro repensar essa rota de carregamento.
Aplicativo
<shell>
<router-view></router-view>
</shell>
const routes = [
{ path: '/', component: Main },
{ path: '/results', component: Results }
]
const router = new VueRouter({
routes,
})
const app = new Vue({
router
}).$mount('#app')
Concha
<div>
<header>
<nav>...</nav>
</header>
<main>
<slot></slot>
</main>
</div>
Página principal
<section>
<form>...</form>
</section>
{
methods: {
onSubmit() {
// ...
this.$router.push('/results')
}
}
}
Página de resultados
<section>
<error v-if="error" :error="error" />
<results v-if="!error" :loading="loading" :results="results" />
<loading v-if="loading" :percentage="loadingPercentage" />
</section>
{
components: {
error: Error,
results: Results,
},
data() {
return {
loading: false,
error: null,
results: null,
}
},
created () {
this.fetchData()
},
watch: {
'$route': 'fetchData'
},
methods: {
fetchData () {
this.error = this.results = null
this.loading = true
getResults((err, results) => {
this.loading = false
if (err) {
this.error = err.toString()
} else {
this.results = results
}
})
}
}
}
Componente Resultados
Basicamente, exatamente o mesmo componente de resultados que você já possui, mas se loading
for verdadeiro ou results
nulo, como preferir, você pode criar um conjunto de dados falso para iterar e criar versões de esqueleto, se desejar. Caso contrário, você pode simplesmente manter as coisas do jeito que está.
this.$router.replace({path: "/results/xxxx"})