相关疑难解决方法(0)

使用 CLI 创建了一个简单的 Vue 项目：

vue 创建我的项目

想加两个页面，所以安装了最新版本的vue-router（目前是v3.4.8），按照vue精通教程进行路由。

这是我的 router.js 文件的样子：

import { createWebHistory, createRouter } from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/about', name: 'About', component: About },
  ]
})

export default router

当然，这就是我的 main.js 文件的样子：

import { createApp } from 'vue'
import router from './router'

createApp({
  template: `
  <div>
    <router-link to='/'>Home</router-link>
    <router-link to='/create'>Create</router-link>
  </div>
  ` …

我正在创建一个 Vue3 应用程序，在添加路由器后，我的第一页正在加载，但它完全是空白的。

我收到以下信息

错误：未捕获的类型错误：Object(...) 不是函数

在控制台中：

./src/router/index.js 中的警告“在‘vue-router’中找不到出口‘createRouter’

./src/router/index.js 中的警告“在‘vue-router’中找不到导出‘createWebHistory’

路由器 -> index.js

import { createWebHistory, createRouter } from "vue-router";
...

const routes = [{
        path: "/user/create",
        name: "createUser",
        component: createUser,
    },
    {
        path: "/users",
        name: "listUser",
        component: listUser,
        meta: { requiresAuth: true }
    },
    {
        path: "/user/show/:id",
        name: "showUser",
        component: showUser,
        meta: { requiresAuth: true }
    },
    {
        path: "/user/update/:id",
        name: "updateUser",
        component: updateUser,
    },
    {
        path: "/login",
        name: "login",
        component: Login
    },
    {
        path: "/register",
        name: "register", …