Javascript VueRouter渲染组件但不更改网址

发布于05月07日

import { createMemoryHistory, 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()
        return ""
      }
    }
  },
  {
    path: "/signup",
    component : () => import("@/components/Signup/Signup.vue"),
  }
];

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

export default router

我不知道为什么当我打开"/"时，组件注册显示，但网址"http://localhost:3000/"根本没有改变.

它完美地显示了组件，问题在于网址.

Authuser目前始终返回true.

推荐答案

发生这种情况是因为您使用createMemoryHistory()作为历史记录模式，该模式不与浏览器兼容，但用于测试和服务器端渲染，因此您需要使用createWebHistory()来利用浏览器的历史记录.

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;