Vue3项目路由拦截与$store调用报错求助

问题1：路由守卫报错next is not a function #

原因 #

Vue Router 4的beforeEach全局守卫回调参数顺序为(to, from, next)，你漏写了from参数，导致原本应该是next的参数被当成了from，从而触发该错误。同时当前路由处于登录页时未做判断，会引发无限重定向。

修复后的router.js代码 #

import { createRouter, createWebHistory } from "vue-router";
import City from "@/components/City.vue";
import Login from "@/components/Login.vue";
import Home from "@/components/Home.vue";

const routes = [
  {
    name: "login",
    path: "/login",
    component: Login,
  },
  {
    name: "city",
    path: "/city",
    component: City,
  },
  {
    name: "home",
    path: "/",
    component: Home,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem("token");
  const user = JSON.parse(localStorage.getItem("user"));

  // 已在登录页直接放行，避免无限重定向
  if (to.name === "login") {
    next();
    return;
  }

  // 无token或用户信息时跳转登录页
  if (!token || !user) {
    next({ path: "/login" });
  } else {
    next();
  }
});

export default router;

问题2：提交表单时报错Cannot read properties of undefined (reading '$store') #

原因 #

1. Vue3的<script setup>语法中this未定义，不能通过this.$store/this.$router获取实例；
2. 调用的action名称错误，你的Vuex action名为login，代码中却写了loginPost；
3. userdata是reactive创建的响应式对象，无需加.value访问。

修复后的Login.vue代码 #

<template>
  <div class="container mt-5">
    <div class="row">
      <div class="col-md-12">
        <div class="col-md-6">
          <div class="form-group">
            <form @submit.prevent="onSubmit">
              <label>Kullanıcı Adı</label>
              <input
                type="text"
                class="form-control"
                v-model="userdata.username"
              />
              <br />

              <label>Şifre</label>
              <input class="form-control" v-model="userdata.password" />
              <br />
              <button class="btn btn-primary">Login</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

const store = useStore();
const router = useRouter();

const userdata = reactive({
  username: "",
  password: "",
});

async function loginAction() {
  const isSuccess = await store.dispatch("login", userdata);
  if (isSuccess) {
    router.push({ path: "/city" });
  }
}

function onSubmit(event) {
  event.preventDefault();
  loginAction();
}
</script>

<style></style>

额外优化提示 #

• 可在Vuex的login action中添加错误捕获逻辑，给用户提供登录失败的反馈；
• 路由导入时修正了命名方式，默认导出的组件无需用大括号导入。

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