Vue-router跳转无响应：注册完成后无法跳转到Dashboard页面

我正在将一个带认证功能的Python+Vue3笔记应用从JavaScript迁移到TypeScript，目前卡在Register.vue组件：注册流程执行完成后，用户无法跳转到Dashboard页面。从控制台调试日志来看，register动作已调用login、viewme接口，状态也正常提交，但Register组件调用REGISTER动作后似乎不再执行后续的跳转逻辑。

Register.vue代码 #

<template>
    <div class="mb-3">
        <label for="username" class="form-label">Username:</label>
        <input type="text" name="username" v-model="username" class="form-control" />
    </div>
    <div class="mb-3">
        <label for="full_name" class="form-label">Full Name:</label>
        <input type="text" name="full_name" v-model="full_name" class="form-control" />
    </div>
    <div class="mb-3">
        <label for="password" class="form-label">Password:</label>
        <input type="password" name="password" v-model="password" class="form-control" />
    </div>
    <button type="submit" class="btn btn-primary" @click="submit">Register</button>
</template>

<script lang="ts">
import { ref, defineComponent } from 'vue'
import { useStore } from '../store/index';
import { useRouter } from '../router/index';
import { UsersActionTypes } from '../store/modules/users/action-types';

export default defineComponent({
    name: 'Register',
    setup() {
        const store = useStore();

        const router = useRouter();

        const username = ref('');
        const full_name = ref('');
        const password = ref('');

        const submit = () => {
            console.log("start submit");
            store.dispatch(UsersActionTypes.REGISTER, {
                "username": username.value,
                "full_name": full_name.value,
                "password": password.value
            })
            .then((res) => {
                console.log("res: " + JSON.stringify(res));
                router.push('/dashboard');
            })
            //.catch((reason) => {
            //     console.log("catch error: " + JSON.stringify(reason));
            // })
            //.finally(() => {
            //     console.log("finally error");
            // });
        }

        return {
            submit,
            username,
            full_name,
            password
        };
    }
})
</script>

router/index.ts代码 #

import {
  createRouter,
  createWebHistory,
  RouteRecordRaw,
  Router
} from 'vue-router';

import { useStore } from '../store/index';

import Home from '../views/Home.vue';
import Register from '../views/Register.vue';
import Login from '../views/Login.vue';
import Dashboard from '../views/Dashboard.vue';
import Profile from '../views/Profile.vue';
import Note from '../views/Note.vue';
import EditNote from '../views/EditNote.vue';

const store = useStore();

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: "Home",
    component: Home
  },
  {
    path: '/register',
    name: 'Register',
    component: Register,
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
  },
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: Dashboard,
    meta: { requiresAuth: true },
  },
  {
    path: '/profile',
    name: 'Profile',
    component: Profile,
    meta: { requiresAuth: true },
  },
  {
    path: '/note/:id',
    name: 'Note',
    component: Note,
    meta: { requiresAuth: true }
  },
  {
    path: '/note/:id',
    name: 'EditNote',
    component: EditNote,
    meta: { requiresAuth: true }
  }
]

let router: Router;

export function useRouter() {
  if (!router) {
    router = createRouter({
      history: createWebHistory(import.meta.env.BASE_URL),
      routes,
    });

    router.beforeEach((to, from, next) => {
      if (to.matched.some(record => record.meta.requiresAuth)) {
        if (store.getters.isAuthenticated) {
          next();
          return;
        }
        next('/login');
      } else {
        next();
      }
    });
  }
  return router;
}

问题排查与修复建议 #

1. 路由守卫中的Store实例错误 #

在router/index.ts中，你在组件上下文外部直接调用了useStore()，这不符合Pinia的使用规范——useStore()必须在Vue组件的setup函数、Pinia的action或其他可组合式API的上下文内调用，否则获取到的Store实例可能无效，导致路由守卫中store.getters.isAuthenticated判断错误，跳转时被拦截到登录页。

修复方式：将Store实例的获取移到路由守卫的回调内部：

// 移除顶部的 const store = useStore();

router.beforeEach((to, from, next) => {
  // 在守卫内部获取Store实例，确保处于Vue上下文
  const store = useStore();
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (store.getters.isAuthenticated) {
      next();
      return;
    }
    next('/login');
  } else {
    next();
  }
});

2. 未捕获REGISTER Action的错误 #

你注释掉了catch和finally块，若REGISTER Action内部抛出错误，会导致then回调无法执行，也就不会触发路由跳转。

修复方式：恢复错误捕获代码，排查是否有异常抛出：

.catch((reason) => {
    console.log("catch error: " + JSON.stringify(reason));
})
.finally(() => {
    console.log("finally executed");
});

3. 认证状态未及时更新 #

需确认REGISTER Action完成后，用户的认证状态（token、用户信息）已正确更新到Store中，否则路由守卫的isAuthenticated仍为false，会跳转到登录页而非Dashboard。

验证点：检查Users模块的Action代码，确保注册成功后调用了登录接口、获取用户信息，并将结果保存到Store的state中；同时确认isAuthenticated getter是基于state中的token或用户信息进行判断的。

内容的提问来源于stack exchange，提问作者LukasHT