Vue-Router渲染Signup组件但URL未变更问题求助

核心原因 #

你当前使用的是createMemoryHistory路由历史模式，这个模式仅在内存中维护路由状态，不会同步修改浏览器的地址栏URL，主要用于服务端渲染、测试环境或不需要操作浏览器地址的场景。这就是组件已正常渲染，但URL未发生变化的根本原因。

修复方案 #

浏览器环境下需使用适配浏览器的路由历史模式：

• createWebHistory：HTML5 History模式，依赖浏览器history.pushState API，URL无#，更美观
• createWebHashHistory：哈希模式，URL带#，兼容性更强（支持旧版浏览器）

修改路由配置代码，替换历史模式即可：

import { createWebHistory, createRouter } from "vue-router";
import { AuthUser } from "../../auth/user";

const routes = [
  {
    path: "/",
    component : () => import("../components/Home/Home.vue"),
    beforeEnter : (to, from, next)=>{
      if(!AuthUser()){
        next({path : "/signup"})
      }else{
        next()
      }
    }
  },
  {
    path: "/signup",
    component : () => import("@/components/Signup/Signup.vue"),
  }
];

const router = createRouter({
  history: createWebHistory(), // 替换为浏览器适配的历史模式
  routes,
});

export default router

另外可以去掉beforeEnter钩子中多余的return ""，不影响逻辑但无保留必要。

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