[javascript] 기록에 추가하지 않고 vue-router로 푸시하는 방법은 무엇입니까?

로딩 경로에서 무슨 일이 일어나고 있는지에 대해 우리가 아는 것이 거의 없다는 점을 고려하면 힘든 전화입니다.

그러나…

로드 / 라우팅을 구축 할 필요가 없었으며, 초기화 / 데이터 수집 단계에서 여러 경로에서 렌더링되는 구성 요소 만로드했습니다.

로딩 경로가 없다는 한 가지 주장은 사용자가 잠재적으로이 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사실이거나 resultsnull 인 경우 원하는 경우 가짜 데이터 세트를 만들어 골격 버전을 반복하고 만들 수 있습니다. 그렇지 않으면, 당신이 가진 그대로 물건을 유지할 수 있습니다.

답변

export default {
  name: "results",
  ...
  importantTask() {
    // do the important work...
    localStorage.setItem('DATA_LOADED', JSON.stringify(true));
    this.$router.push({path: "/results/xxxx"});
  }
}

// router.js...
router.beforeEach((to, from, next) => {
  const dataLoaded = JSON.parse(localStorage.getItem('DATA_LOADED'));
  if (to.name === "loading" && dataLoaded)
  {
    if (from.name === "results")
    {
      next({ name: "main"} );
    }
    if (from.name === "main")
    {
      next({ name: "results"} );
    }
  }
  next();
});

export default {
  name: "main",
  ...
  queryButtonClicked() {
    localStorage.setItem('DATA_LOADED', JSON.stringify(false));
    this.$router.push({path: "/loading"});
  }
}