Vue: Vue Router не переходит по каким-либо маршрутам

Я новичок в Vue Js и создал проект Vue с @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');

Но мое приложение не перемещается по соответствующим маршрутам и добавляет /# для каждого маршрута.


vue.js vuejs3 vue-router
person Npsad    schedule 16.02.2021    source источник
comment
Я использовал VueRouter с Vue 2, но еще не использовал Vue 3, поэтому не уверен, что это необходимо для Vue 3, но вам может потребоваться добавить Vue.use (VueRouter).   -  person Tim    schedule 16.02.2021
comment
Какую версию Vue Router вы используете?   -  person Dan    schedule 17.02.2021
comment
vue: ^ 3.0.0, vue-router: ^ 3.5.1   -  person Npsad    schedule 17.02.2021

Ответы (2)


arrow_upward
1
arrow_downward

Vue 3 требует Vue Router 4 или новее, поэтому вам нужно обновить эту зависимость:

npm i -S vue-router@4

Соответствующее руководство по миграции на Vue Router 4:

Пример:

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

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

//...
person tony19    schedule 18.02.2021
comment
Большое спасибо. Попытка создать маршрутизатор раньше не работала из-за проблемы с версией маршрутизатора. но с обновлением версии маршрутизатора до npm i -S vue-router @ 4 createRouter работает нормально и теперь может перемещаться. - person Npsad; 19.02.2021

arrow_upward
2
arrow_downward

Попробуйте изменить способ импорта компонентов Vue, вы можете сделать следующее:

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

Вот пример внутри массива маршрутов:

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

Кроме того, старайтесь всегда добавлять '/' путь по умолчанию для нераспознанных маршрутов.

person Rodrigo Ramirez    schedule 17.02.2021
comment
Привет, заменен динамическим импортом, как вы предложили. быть функцией или объектом с функцией установки. runtime-core.esm-bundler.js? 5c40: 38 [предупреждение Vue]: не удалось разрешить компонент: router-view. - person Npsad; 17.02.2021