Vue: Vue Router is not navigating to any routes

Question

I am a newbie to Vue Js, and created a Vue project with @vue/cli 4.5.11.

import { createApp } from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import TeamsList from './components/teams/TeamsList.vue'
import UsersList from './components/users/UsersList.vue'

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path:'/teams',component:TeamsList},
        { path:'/users',component:UsersList}
    ]
});

const app = createApp(App);

app.use(router);

app.mount('#app');

But my app is not navigating to respective routes, and it's appending /# for every route.

user_6277151 · Answer

Vue 3 requires Vue Router 4 or newer, so you have to update that dependency:

npm i -S vue-router@4

Relevant Vue Router 4 migration guide:

Example:

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

const router = createRouter({
    history: createWebHistory(),
    routes: [/*...*/]
});

//...

user_12011534 · Answer

Try changing the way you import your Vue Components, you can do the following:

component: () => import('./components/teams/TeamsList')

Here's an example inside the routes array:

routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/teams',
    name: 'Teams',
    component: () => import('./components/teams/TeamsList')
  }
]

Also, try to always add a default '/' path for unrecognized routes.

user_18113554 · Answer

Here is the solution

vue-router version 4 or newer is working for Vue3.
"vue-router": "^3.5.3" is working for Vue2.

Vue: Vue Router is not navigating to any routes

3 Answers