로딩 경로에서 무슨 일이 일어나고 있는지에 대해 우리가 아는 것이 거의 없다는 점을 고려하면 힘든 전화입니다.
그러나...
로드 / 라우팅을 구축 할 필요가 없었으며, 초기화 / 데이터 수집 단계에서 여러 경로에서 렌더링되는 구성 요소 만로드했습니다.
로딩 경로가 없다는 한 가지 주장은 사용자가 잠재적으로이 URL로 직접 이동할 수 있다는 것입니다. 그러면 사용자를 어디로 보낼지 또는 어떤 조치를 취할지 알 수있는 컨텍스트가 충분하지 않은 것 같습니다. 이 시점에서 오류 경로로 넘어가는 것을 의미 할 수 있습니다. 전반적으로 좋은 경험은 아닙니다.
또 다른 방법은 경로를 단순화하면 경로 간 탐색이 훨씬 단순 해지고를 사용하지 않고 예상대로 작동하는 것입니다 $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
사실이거나 results
null 인 경우 원하는 경우 가짜 데이터 세트를 만들어 골격 버전을 반복하고 만들 수 있습니다. 그렇지 않으면, 당신이 가진 그대로 물건을 유지할 수 있습니다.
this.$router.replace({path: "/results/xxxx"})