ncaught TypeError：无法使用“in”运算符在未定义的 vue 路由器中搜索“路径”

Question

当我在任意点上从一个组件随机移动到另一个组件时，vue 都会给出此错误，然后我无法移动另一个组件。

此错误不在任何特定组件上，它可能在任何地方发生。

错误

Uncaught TypeError: Cannot use 'in' operator to search for 'path' in undefined
    at Object.resolve (vue-router.esm-bundler.js?6c02:2728)
    at matchView (index.esm.js?bec5:446)
    at Array.find (<anonymous>)
    at findViewItemByPath (index.esm.js?bec5:464)
    at Object.findViewItemByRouteInfo (index.esm.js?bec5:424)
    at Object.canStart (index.js?8a30:805)
    at eval (ion-app_8.entry.js?49af:707)
    at canStart (swipe-back-53c5a7dd.js?05d4:8)
    at pointerDown (index-f49d994d.js?14e6:251)

这是我的路由器index.js 文件

import { createRouter, createWebHistory } from '@ionic/vue-router';

import Tabs from '../views/Tabs.vue'
import SignIn from "@/views/Signin.vue";
import Signup from "@/views/Signup.vue";
import { TokenService } from "@/services/token.service";

const routes = [
  {
    path: '/',
    redirect: '/tabs/tab1'
  },
  {
    path: '/search-workers',
    component: () => import('@/views/SearchWorker.vue')
  },
  
  {
    path: '/login',
    component: SignIn,
    meta: {
      public: true,
      onlyWhenLoggedOut: true
    }
  },
  {
    path: '/signup',
    component: Signup,
    meta: {
      public: true,
      onlyWhenLoggedOut: true
    }
  }
]

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

router.beforeEach((to, from, next) => {
  const isPublic = to?.matched?.some(record => record?.meta?.public);
  const onlyWhenLoggedOut = to?.matched.some(
      record => record?.meta?.onlyWhenLoggedOut
  );
  const loggedIn = !!TokenService.getToken();

  if (!isPublic && !loggedIn) {
    return next({
      path: "/login",
      query: { redirect: to?.fullPath }
    });
  }

  if (loggedIn && onlyWhenLoggedOut) {
    return next("/tabs/tab1");
  }

  next();
});

export default router

这就是我在组件中使用链接路由器的方式

<ion-item router-link="/search-workers" v-if="userInfo?.role_id == 9" @click="opened()">
Search Worker
</ion-item>

这可能是什么原因？我们该如何解决呢？

Answer 1

我遇到了类似的问题，但后来通过使用解决了 “历史记录：createWebHistory()”而不是“历史记录：createWebHistory”。通过调用它而不是指向它来解决它。

Answer 2

我刚刚遇到这个问题，因为在我的 App.vue 文件中，我不小心放入了

<router-link></router-link>

而不是

<router-view></router-view>

我花了几分钟才弄清楚，所以检查一下。

Answer 3

对我来说

history: createWebHistory

=>这会产生错误，

通过将其调用为函数=>历史来解决：createWebHistory()，

Answer 4

我有同样的问题，我通过在我的路由器链接中添加 to 属性来解决

Answer 5

改变

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

到

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

为我工作

Answer 6

检查

process.env.BASE_URL

中的

createWebHistory(process.env.BASE_URL)

。 我遇到了类似的问题，我有一个拼写错误，并留下了这样的配置：

history:createWebHistory,

Answer 7

就我而言，我的 Router/index.js 文件中有以下内容。

{
  path: '/contacts',
  name: 'Contacts',
  component: function(){ import('../views/ContactsView.vue'); } 
}

所以我将匿名函数更改为箭头函数

{
  path: '/contacts',
  name: 'Contacts',
  component: () => import('../views/ContactsView.vue')
}

并且成功了。我是初学者，所以我不确定它为什么会这样。

Answer 8

我遇到了同样的问题，这是因为我错误地在导入末尾添加了 .vue { 路径: "/login", 组件: () => import("pages/AuthPage.vue").vue }, 所以通过删除 .vue 问题就解决了