beforeRouteEnter無限ループ

Question

Vue Routerでこの問題が発生しています。

私のシナリオは、/が最初にロードすることを許可し、そこからいくつかのデータをフェッチし、:chatIdのparamが、私はAPIから得たデータから設定された場合、それは/chat/:chatIdルートに行くと、そこにUIをレンダリングすることです。

私は、ルートエイリアスとして/と['chat', 'chat/:chatId']を持っています。

私はこの点に関してコンポーネント内のガードを持っています。

beforeRouteEnter(to, from, next) { 
    store.dispatch('fetchOpenSessions') 
    .then(() => { 
    const firstChat = Object.keys(store.state.chatsidebar.openSessions)[0]; 
    next({ name: 'chat', params: { chatId: firstChat } }); 
    }); 
}, 

しかし、このコードは無限にループしてしまい、ブラウザがハングしてしまいます。

私の初期ルートが無限ループにならずに/または/chatの場合、私はどのようにしてchat/:chatIdを設定しますか？

Answer 1

beforeRouteEnter(to, from, next) { 
    store.dispatch('fetchOpenSessions') 
     .then(() => { 
      if(to.name == 'chat'){ 
       next(); 
      }else{ 
       const firstChat = Object.keys(store.state.chatsidebar.openSessions)[0]; 
       next({ name: 'chat', params: { chatId: firstChat } }); 
      } 
     }); 
},