ncaught TypeError: Cannot use 'in' operator to search for 'path' in undefined vue router

Question

when I am randomly moving from one component to another on any point vue gives this error and then i can not move another component.

This error is not on any specific component it can happen anywhere.

error

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)

Here is my router index.js file

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

This is how i am using link router in my components

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

What could be the reason of it? How we can resolve it?

Kreiker

it usually happens when you forgot to give to='/' to router-link – Lucarne

in my case, within createRouter, I used history: createWebHistory, instead of using createWebHistory() – Gurtner

Answer 1

I was facing similar issue but then, it got solved by using "history: createWebHistory()" instead of "history: createWebHistory". It got resolved by calling it instead of pointing at it.

Rift

Answer 2

I just had this issue because, in my App.vue file, I accidentally put

<router-link></router-link>

instead of

<router-view></router-view>

Took me a few minutes to figure it out, so check that.

Barrister

In my case, i forgot changing href to to in <router-link to="/"></router-link> – Turmeric

Answer 3

for me history: createWebHistory => this is creating error,

solved by calling it as function => history: createWebHistory(),

Erotica

Answer 4

i had same issue, and i solve with add to property in my router-link

Vocalist

Answer 5

change

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

to

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

work for me

Voleta

Answer 6

Check process.env.BASE_URL in createWebHistory(process.env.BASE_URL). I had similar issue where I had a typo and had left the config like this: history:createWebHistory,

Internationalize

Answer 7

In my case, I had the following in my Router/index.js file.

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

So I changed the anonymous function to an arrow function

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

and it worked. I am a beginner, so I am not sure of the specifics of why it behaved this way.

Bumblebee

Answer 8

I had the same issue and it was caused because I mistakenly added a .vue to the end of my import { path: "/login", component: () => import("pages/AuthPage.vue").vue }, so by just removing the .vue the issue was solved

Organogenesis