Vue主文件添加beforeEach后router-view失效问题求助

核心原因 #

你错误地将beforeEach的返回值赋值给了router变量——Vue Router的beforeEach方法返回的是用于移除该守卫的函数，而非Router实例。这导致app.use(router)时传入的不是合法的路由实例，路由插件未被正确挂载，最终出现router-view无法解析、$route未定义的报错。

修正步骤 #

1. 拆分路由实例创建与守卫注册 #

修改main.ts中的路由代码，先创建Router实例，再单独注册beforeEach守卫：

const router = createRouter({
  history: createWebHistory(),
});

// 单独注册导航守卫
router.beforeEach((to, from, next) => {
  // 修正白名单：加入/login，避免未登录时无限重定向
  const publicPages = ['/', '/login'];
  const authRequired = !publicPages.includes(to.path);
  const loggedIn = !!sessionStorage.getItem('Orcamento:token');

  if (authRequired && !loggedIn) {
    next('/login');
  } else {
    next();
  }
});

2. 修复导航守卫的无限重定向问题 #

原代码中publicPages只包含/，当未登录用户被跳转到/login时，/login不在白名单内，会再次触发守卫逻辑跳转到/login，形成无限循环。因此必须将/login加入白名单。

验证 #

修改后重新运行项目，路由功能即可正常工作，router-view和$route能被正确识别。

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