vue.js - $route.query 被神秘地设置了

Question

Vue 2.6.12

我router.beforeEach在路由器中使用来记录to.query我的 !auth / auth / entryUrl 逻辑。

它一开始是空的，但在操作员之前next()它有一个对象（我商店中的一个过滤器对象）。我很困惑它是如何设置的，因为我不是故意这样做的，也不知道如何查明来源。

重新刷新页面并记录 this.$route.querybeforeCreate()应该返回一个空对象，但它是过滤器对象。

在其他页面上，记录 this.$route.query 会返回 {}，如我所料。

路由器/索引

（关于如何重构这个以提高效率的提示）

import Vue from "vue";
import VueRouter from "vue-router";
import AddItem from "../views/AddItem";
import store from "../store/index";
...

Vue.use(VueRouter);

const routes = [
  {
    path: "/login",
    name: "AppLogin",
    component: AppLogin,
    meta: { requiresAuth: false },
  },
  {
    path: "/art-inventory",
    name: "ArtInventory",
    component: ArtInventory,
    meta: { requiresAuth: true },
  },
  {
    path: "/",
    redirect: { name: "ArtInventory" },
    meta: { requiresAuth: false },
  },
  {
    path: "*",
    redirect: "/404",
    component: NotFound,
    meta: { requiresAuth: false },
  },
  {
    path: "/404",
    name: "404",
    component: NotFound,
    meta: { requiresAuth: false },
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

let entryUrl = null;
router.beforeEach((to, from, next) => {
  console.log(to.query); // empty {}
  let localStorageUserData = JSON.parse(localStorage.getItem("userData"));
  let storeUserData = store.getters.getUserData;
  let userData = localStorageUserData || storeUserData;
  let isAuthenticated = userData.token !== "" && userData.token !== undefined;

  if (to.matched.some((record) => record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      if (to.name !== "AppLogin" && to.name !== "ArtInventory") {
        entryUrl = to.fullPath;
      }
      if (to.name !== "AppLogin") {
        next({ name: "AppLogin" });
      }
    } else if (entryUrl) {
      let url = entryUrl;
      entryUrl = null;
      window.location.href = url;
    } else {
      console.log(to.query); // not empty {...}

      next();
    }
  } else {
    next();
  }
});

export default router;

标签： vue.jsvuexvue-router