Vue：Vue Router 没有导航到任何路线

Question

我是 Vue Js 新手，用 @vue/cli 4.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 组件的方式，您可以执行以下操作：

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

这是路由数组中的示例：

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

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

Answer 2

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

//...

Answer 3

这是解决方案

vue-router 版本 4 或更高版本适用于 Vue3。
"vue-router": "^3.5.3" 正在为 Vue2 工作。

Vue：Vue Router 没有导航到任何路线

Vue: Vue Router is not navigating to any routes

vue.js

vue-router

vuejs3