Vue：Vue 路由器没有导航到任何路线

Question

我是Vue Js的新手，用@vue/cli4.5.11创建了一个Vue项目。

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');

但是我的应用程序没有导航到相应的路线，它为每条路线附加了/#。

Answer 1

Vue 3 需要 Vue Router 4 或更新版本，因此您必须更新该依赖项：

npm i -S vue-router@4

相关的 Vue Router 4 迁移指南：

• new Router becomes createRouter (createRouter)
• New history option to replace mode(createWebHistory)

例子：

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

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

//...

Answer 2

尝试更改导入 Vue 组件的方式，您可以执行以下操作：

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

这是路由数组中的一个示例：

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

另外，请尝试始终为无法识别的路由添加默认的'/' 路径。