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

但是我的应用程序不能导航到相应的路由，而且对于每个路由都会附加“/#”。

- Npsad

---

我已经在Vue 2中使用了VueRouter，但还没有在Vue 3中使用过，所以不确定在Vue 3中是否必要，但你可能需要添加Vue.use(VueRouter)。 - Tim

你正在使用哪个版本的Vue Router？ - Dan

"vue": "^3.0.0", "vue-router": "^3.5.1" - Npsad

Answer 1

Vue 3需要使用Vue Router 4或更新版本，因此您需要更新相关依赖：

npm i -S vue-router@4

相关的Vue Router 4迁移指南：

• new Router 更改为 createRouter (createRouter)
• 新history选项替代mode (createWebHistory)

示例:

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

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

//...

- tony19

---

非常感谢，之前尝试使用Create Router时由于路由器版本问题无法正常工作。但是通过更新路由器版本到npm i -S vue-router@4，Create Router现在可以正常工作并且能够进行导航了。 - Npsad

Answer 2

尝试更改导入Vue组件的方式，你可以按照以下步骤进行操作：

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

这里有一个在路由数组中的例子：

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

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

- Rodrigo R

---

你好，根据您的建议，我们已经将"Hi"替换为动态导入。现在出现了一些问题，/#附加没有发生，但是没有路由到任何页面，在控制台上显示以下错误：runtime-core.esm-bundler.js?5c40:38 [Vue warn]: A plugin must either be a function or an object with an "install" function.runtime-core.esm-bundler.js?5c40:38 [Vue warn]: Failed to resolve component: router-view. - Npsad

Answer 3

这里是解决方案

Vue3 可以使用 vue-router 版本 4 或更高版本。
Vue2 可以使用 "vue-router": "^3.5.3" 版本。

- anonymous