beforeRoute进入无限循环

Question

我在使用 Vue 路由器时遇到了这个问题。

我的方案是允许首先加载 /，从那里获取一些数据，然后它将转到 /chat/:chatId 路由并在那里呈现 UI，其中 :chatId 参数是根据我从 API 获得的数据设置的.

我有 / 和 ['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 } });
            }
        });
},