beforeRouteEnter 无限循环

Question

我在使用 Vue Router 时遇到了这个问题。

我的方案是允许首先加载 /，从那里获取一些数据，然后它将转到 /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 } });
            }
        });
},

beforeRouteEnter 无限循环

beforeRouteEnter infinite loop

javascript

vue.js

vue-router