これは、積載ルートで何が発生しているかについて私たちがほとんど知らないことを考えると、難しい電話です。
だが...
ロードルートを構築する必要はありませんでした。init/ data収集段階で複数のルートにレンダリングされるコンポーネントをロードするだけです。
読み込みルートがないことの1つの引数は、ユーザーがこのURLに(誤って)直接移動する可能性があり、ユーザーの送信先や実行するアクションを知るのに十分なコンテキストがないように思われることです。ただし、この時点でエラールートに陥る可能性があります。全体として、素晴らしい経験ではありません。
もう1つは、ルートを簡略化すると、ルート間のナビゲーションがはるかに簡単になり、を使用しなくても期待どおり/期待どおりに動作することです$router.replace
。
これで問題が解決しないことを理解しています。しかし、このロードルートを再考することをお勧めします。
アプリ
<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')
シェル
<div>
<header>
<nav>...</nav>
</header>
<main>
<slot></slot>
</main>
</div>
メインページ
<section>
<form>...</form>
</section>
{
methods: {
onSubmit() {
// ...
this.$router.push('/results')
}
}
}
結果ページ
<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
}
})
}
}
}
結果コンポーネント
基本的には、既存のまったく同じ結果コンポーネントですが、loading
trueであるかresults
nullである場合でも、必要に応じて、偽のデータセットを作成して反復処理を行い、スケルトンバージョンを作成できます。そうでなければ、あなたはそれをあなたがそれを持っている方法でそのまま保つことができます。
this.$router.replace({path: "/results/xxxx"})