CODEWITHSUNDEEP
vue.jsvue-routervuejs3
Npsad
Npsad

Reputation: 606

Vue: Vue Router is not navigating to any routes

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.

Upvotes: 3

Views: 1834

Answers (3)

anonymous
anonymous

Reputation: 37

Here is the solution 👉

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

Upvotes: -1

tony19
tony19

Reputation: 138206

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: [/*...*/]
});

//...

Upvotes: 3

Rodrigo
Rodrigo

Reputation: 481

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.

Upvotes: 2

Related Questions