Vue3“在‘vue-router’中找不到导出‘createWebHistory,createRouter’

2024-03-20

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

我收到以下信息

错误:未捕获类型错误:对象(...)不是函数

在控制台中:

./src/router/index.js 中出现警告“未找到导出‘createRouter’ 在“vue-路由器”中

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

路由器->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",
        component: Register
    },
    {
        path: "/users/bearer",
        name: "bearer",
        component: bearer,
        meta: { requiresAuth: true }
    }

]

const router = createRouter({
    history: createWebHistory(),
    routes,
});

router.beforeEach((to, from, next) => {
    const requiresAuth = to.matched.some(record => record.meta.requiresAuth);
    const isAuthenticated = firebase.auth().currentUser;
    console.log("isauthenticated", isAuthenticated);
    if (requiresAuth && !isAuthenticated) {
        next("/login");
    } else {
        next();
    }
});

export default router;

在这里找到了这个问题的答案:

堆栈溢出问题 https://stackoverflow.com/questions/64623889/how-to-add-router-to-vue-cli-app-with-vuejs-3

您需要通过 npm 安装路由器

npm install vue-router@next --save
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue3“在‘vue-router’中找不到导出‘createWebHistory,createRouter’ 的相关文章

  • 直接加载页面到锚标记

    当我加载 URL 中带有哈希标记的页面时 页面会加载 然后跳转到锚标记 有没有什么方法可以防止这种 跳转 要么直接将页面加载到锚标记 要么至少使滚动平滑 我在 Chrome 和 Firefox 中看到这个问题 但在 IE 中没有 如果你仍然
  • Ace Editor 获取当前选定的行号和文本

    我目前正在使用 Ace Editor 但我在文档中找不到与检索当前所选行号及其文本相关的任何内容 有任何想法吗 首先 定义 选定行 ace 中的选择可以跨多行设置 如果您的意思是 未设置选择 当前行是光标闪烁的行 var currline
  • Vue - 如何附加组件?

    我正在尝试创建一个按钮 一旦按下该按钮 就会向我的组件添加一个子组件 我的代码可以工作 只是 HTML 被解析为字符串 这是父组件
  • 滚动内容上的 CSS 框阴影

    我想要一个带有插入框阴影的 div 其中包含滚动的内容 不幸的是 盒阴影不会投射在内容中的元素上 而是投射在背景上 但我希望它也覆盖内容元素 我偶然发现了这个解决方案 http jsfiddle net HPkd3 http jsfiddl
  • 使用 html 表收集提交表单中的各种数据

    我有一个 jsp 页面 其中包含一个表 分页并带有顺序列 一个搜索字段和其他基于复选框的过滤器 这样 当我单击按钮时 它会采用表格的分页 表格的顺序 搜索字段中的值以及最终的其他参数 复选框 来执行查询 目前 该表具有分页和使用标签库排序的
  • Javascript 子字符串方法帮助

    长话短说 我正在开发一个 Web 应用程序并在其中使用 AJAX 我试图禁用点击时链接的默认操作 将哈希值附加到链接 然后从网址中删除 我遇到的问题是 虽然哈希值被相应地附加 但子字符串方法并没有提取 而是提取了它后面的字母 这是我的代码
  • XMLHttpRequest 无法加载 ZScaler 的问题

    我在 EC2 实例中托管了一个网站 并使用以下命令访问该页面http ec2 网址 该页面向同一实例上托管的另一个 Web 应用程序发出 ajax 请求 如果我访问通过 ZScaler 代理的页面 我会得到XMLHttpRequest ca
  • IE 中“对象不支持属性或方法‘查找’”

  • 通过 AJAX 加载 Google Maps API,控制台错误

    我正在使用 jquery javascript ajax 和 php 构建一个完全动态的网站 当我单击导航链接时 浏览器会使用 ajax 打开该页面 所以基本上所有页面都加载在同一个index php 中 如果我转到 位置 选项卡 其中有谷
  • 如何在浏览器调整大小时调整div大小

    是的 所以我不使用粘性页脚 而是决定创建一个 jQuery 函数来更改 mainContent div 的大小 以便页脚可以很好地适应 基本上我想做的是 mainContent height 100 40px Where footer he
  • css打印模式:仅在生成的word文档的第一页上显示页眉和页脚

    我使用 html 代码成功生成了 Word 文档 其中页眉和页脚以 css 打印模式设置样式 这是我的代码
  • Knockout JS 与 Ratchet 和 Push.js 配合得很好,直到我添加数据转换

    我正在使用 Ratchet js push js 库为移动 Web 应用程序创建 UI 在这个库中 链接是通过将要加载的文件 推送 到 content DOM 元素中而不是加载整个页面来处理的 但是 push js 在加载页面时不会加载它找
  • 将数组中的项目移动到最后一个位置

    我有一系列对象 我想将选定的对象移动到数组中的最后一个位置 我如何在 javascript 或 jquery 中执行此操作 这是我的一些代码 var sortedProductRow this product row for var s i
  • FB.logout() - 无访问令牌 - “以不同用户身份登录”

    这个问题与这个问题相关 在没有访问令牌的情况下调用 FB logout https stackoverflow com questions 8430474 fb logout called without an access token 1
  • 如何使用 Chart.js 在堆积条形图中显示内联值?

    我正在使用 Chart js 库在堆叠条形图中显示一些值 但我正在努力找出如何显示条形图中的值 即 现在 我有以下代码 可以在条形顶部显示数字 但我想知道如何在条形内部显示它们 var numberWithCommas function x
  • 使用两个键执行自动完成 - Material UI with React

    当使用两个值之一搜索时 我试图自动完成输入 title and year 但是 它仅在我搜索时才有效title 当我搜索时year 它不显示任何选项 示例代码 export default function ComboBox return
  • Webpack 和外部库

    我正在尝试 webpack http webpack github io http webpack github io 看起来真的很不错 但我有点被困在这里了 假设我正在为库 f ex jQuery 使用 CDN 然后在我的代码中 我想要r
  • 从另一个窗口获取 Javascript 错误

    我创建了一些测试代码来打开一个新窗口并尝试从父窗口捕获新窗口中的 JavaScript 错误 问题是它只适用于 Firefox All of 测试 html code
  • Google 自定义搜索“热门查询”错误请求错误

    在 Google CSE 中 当我尝试获取Popular Queries 我在FireBug Console 网络错误 400 错误请求 http www google com cse api xxxxxxxxx xxxxxxx cse x
  • Firefox 中的代理设置不会“粘连”

    在家里我们有一个代理服务器 在工作中我们不会 Firefox 在这方面令人恼火 每当我启动它时 它都会默认使用代理服务器 如果我执行 工具 gt 选项 gt 设置 并选择 无代理 则没有问题 但是 如果我关闭 Firefox 并重新启动它

随机推荐

  • Android - Firebase - 我需要删除每个侦听器吗?

    我做了相当多的研究 但找不到我需要的答案 我所知道的是 当我将 ValueEventListener 附加到数据库引用时 我知道稍后需要将其删除 现在发现很难解决 因为存在大量内存泄漏 我不知道的是 我还需要分离所有其他侦听器吗 这包括 F
  • java.lang.RuntimeException:android.os.TransactionTooLargeException:在片段之间导航时数据包大小 558780 字节

    我在用Bundle在活动和片段之间传输数据 当我从一个片段导航到新片段时 不传输数据或使用Bundle为了获取数据 应用程序崩溃并出现以下错误 gt gt 10 09 11 36 09 100 467 467 E JavaBinder FA
  • FragmentStatePagerAdapter 处理 getItem() 位置

    我尝试了这个 但错误的列表被绑定到回收器视图 我也尝试过 SparseArray 即使这样也不起作用 当我启动 Mainactivity 时 getItem 被调用两次 退回的仓位如何处理 我尝试返回 viewpager currentIt
  • JavaScript 未定义替换为 null

    在 JavaScript 中undefined可以重新分配 因此通常建议创建一个自执行函数 以确保 undefined 实际上是未定义的 作为备选null and undefined肯定是 但任何其他值都大致相当于null undefine
  • 无法在主机上创建 node_modules 文件夹并将主机文件夹挂载到容器

    我的 dockerfile 将运行 npm install 但是之后docker compose build即使在看到构建后 我的主机文件夹中的文件夹 node modules 仍然为空 我怎样才能获得该文件夹并反映在主机中 这是 dock
  • 内容安全策略 (CSP) 如何运作?

    我在开发者控制台中收到一堆错误 拒绝评估字符串 拒绝执行内联脚本 因为它违反了以下内容安全策略指令 拒绝加载脚本 拒绝加载样式表 这是怎么回事 内容安全策略 CSP 如何运作 我该如何使用Content Security PolicyHTT
  • DataGridView 的 CellValueChanged 与 CellValidating 事件

    为 DataGridView 实现验证逻辑代码和条件格式代码的最佳位置是什么 在我读过的许多关于该控件的书籍和文章中 似乎表明处理该控件的适当事件是 CellValidating 事件 嗯 这个名字不仅仅意味着这一点 然而 根据我的口味 此
  • 为什么 PHP 中的函数 levenshtein 有 255 个字符的限制?

    有谁知道为什么这个功能编辑 http php net manual en function levenshtein phpPHP 有 255 个字符的限制吗 这是该函数的 PHP 完整实现 正如您所看到的 有基于字符串字符长度的嵌套循环 f
  • 如何用c++发一副牌

    我的要求如下 int Deal int CardSet CardSet 将两只手分成两手CardSet争论通过了 每手牌的数量是第一个参数 应一次从当前组中取出一张牌 将牌置于交替手中 例如 如果当前集合保持2S 3S 4S 5S 6S 7
  • 具有管理员权限的 Windows 窗体启动

    我有一个 Windows 窗体应用程序 需要管理员权限才能运行 为此 我使用以下代码
  • 在Lua中,处理包含nil的可变参数的正确方法是什么?

    我正在尝试创建一个调试打印函数 它将文件句柄作为第一个参数 首先 我写一个这样的函数 function fprint f for i v in ipairs do f write tostring v f write t end f wri
  • Docker 守护进程未运行

    这方面的新手 我已经在我的 Windows PC 上安装了新版本的 Docker 我使用的是 Windows 10 专业版 我已经尝试了非常基本的 docker 命令 但它不起作用 我还以管理员身份运行 docker 总是出现以下错误 do
  • 使用 Watir-Webdriver 时 Chrome 中的默认配置文件名称?

    我下载了 Chromedriver 然后将其解压到正确的位置 usr bin 但我不知道 Chrome Chromium 浏览器的默认配置文件名称是什么 因此此行抛出错误消息 browser Watir Browser new chrome
  • 在 RMarkdown 中使用图像作为表格?

    我知道我想做的事情听起来很愚蠢 但请耐心等待 我想将表格的现有图像 PNG 插入到将转换为 pdf 的 RMarkdown 文档中 有什么办法可以做到这一点并获得图像被视为一张桌子用于编号目的 也就是说 显然我可以做 A caption f
  • realpath 函数的转换问题(C 编程)

    当我编译以下代码时 define POSIX C SOURCE 200112L define ISOC99 SOURCE define EXTENSIONS include
  • DalvikVM 上的 CLI 在 JNI 库上失败

    我需要在 Android 上运行 java 应用程序的命令行版本 是的 我知道这并不简单 我尝试使用 Dalvikvm 启动它 它实际上启动了 但后来我的代码失败了 因为它开始使用 android util log 并抛出此异常 java
  • 如何在 Apache 网站内托管 ASP.NET Core Web 应用程序?

    我有一个旧的php使用开发的应用程序Yii2框架托管在Centos路径上的服务器 var www html 该应用程序可在以下位置访问http somedomain com 我正在开发使用新的 API 项目ASP NET MVC Core需
  • 在 IntelliJ IDEA 中运行时出现 java.lang.ClassNotFoundException

    我创建一个使用数据库的程序 在 IntelliJ IDEA 中编译时出现以下错误 有人知道为什么会发生这种情况以及我该如何解决它吗 您收到的错误不是在编译时发生的 而是在您尝试运行应用程序时发生的 发生这种情况是因为 Java 无法找到Ta
  • Bash 脚本:无法正确处理 SIGTSTP

    我有一个 bash 脚本 用于安装和卸载设备 并在其间执行一些读取操作 由于设备速度非常慢 因此脚本大约需要 15 秒才能完成 安装至少需要 5 6 秒 由于安装此设备可能会导致其他问题 因此我不希望此脚本被中断 话虽如此 我可以正确处理
  • Vue3“在‘vue-router’中找不到导出‘createWebHistory,createRouter’

    我正在创建一个 Vue3 应用程序 添加路由器后 我的第一页正在加载 但它完全是空白的 我收到以下信息 错误 未捕获类型错误 对象 不是函数 在控制台中 src router index js 中出现警告 未找到导出 createRoute