vue 路由报错

news2024/11/18 7:46:09

在进行如下路由跳转时
const edit = (index: number) => {
let row: any = categoryData.value[index];
router.push({ name: “commodityedit”, query: { id: row.id, name: row.name } });
};

遇到问题如下

TypeError: Failed to fetch dynamically imported module: http://localhost:4000/src/views/product/commodityedit.vue
triggerError @ vue-router.esm-bundler.js:3325
(匿名) @ vue-router.esm-bundler.js:3057
Promise.catch(异步)
pushWithRedirect @ vue-router.esm-bundler.js:3051
push @ vue-router.esm-bundler.js:2986
install @ vue-router.esm-bundler.js:3403
use @ runtime-core.esm-bundler.js:4327
(匿名) @ main.ts:19
vue-router.esm-bundler.js:72 [Vue Router warn]: Unexpected error when starting the router: TypeError: Failed to fetch dynamically imported module: http://localhost:4000/src/views/product/commodityedit.vue
warn @ vue-router.esm-bundler.js:72
(匿名) @ vue-router.esm-bundler.js:3405
Promise.catch(异步)
install @ vue-router.esm-bundler.js:3403
use @ runtime-core.esm-bundler.js:4327
(匿名) @ main.ts:19
client.ts:53 [vite] connected.

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: http://192.xxx.xxx.xx:4000/src/views/orderManage/TradeOrder/TradeOrder.vue


原因:有可能是路由文件名打错了 或者文件位置不对

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409581.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【uni-app】第三方ui组件推荐引入的方法

ui组件推荐 1. Muse-UI Muse UI 是一套 Material Design 风格开源组件库,旨在快速搭建页面。它基于 Vue 2.0 开发,并提供了自定义主题,充分满足可定制化的需求。material-design-icons 是谷歌定义的一套icontypeface 是谷歌定义的一套字体…

html+css+js制作LOL官网,web前端大作业(3个页面+模拟登录+链接)

文章目录一、效果图1.1首页1.2 模拟登录1.3 游戏资料页面1.4 商城页面二、代码2.1 首页2.2 资料页面2.3 商城页面三、链接一、效果图 1.1首页 1.2 模拟登录 1.3 游戏资料页面 1.4 商城页面 二、代码 2.1 首页 index.html <!doctype html> <html><head>&l…

JavaScript高级 |如何玩转箭头函数?

本文已收录于专栏⭐️ 《JavaScript》⭐️ 学习指南&#xff1a;箭头函数语法规则简写规则常见应用mapfilterreduce箭头函数中的this使用concatthis的查找规则完结散花参考文献箭头函数 在ES6中新增了函数的简写方式----箭头函数&#xff0c;箭头函数的出现不仅简化了大量代码…

Vue3自动引入组件,组件库

在做vue3项目中时&#xff0c;每次使用都需要先进行引入&#xff0c;用ts的还好&#xff0c;会有爆红提示&#xff0c;如果是使用js开发的很多时候都会等到编译的时候才发现哪里哪里又没有引入&#xff0c;就会很浪费时间&#xff0c;偶然发现一款好用的组件可以帮助我们很好的…

【你不知道的 CSS】你写的 CSS 太过冗余,以至于我对它下手了

:is() 你是否曾经写过下方这样冗余的CSS选择器: .active a, .active button, .active label {color: steelblue; }其实上面这段代码可以这样写&#xff1a; .active :is(a, button, label) {color: steelblue; }看~是不是简洁了很多&#xff01; 是的&#xff0c;你可以使用…

详细分析解决Uncaught SyntaxError: Cannot use import statement outside a module (at ...)的错误

文章目录1. 复现错误2. 分析错误3. 解决错误1. 复现错误 今天在学习es6时&#xff0c;启动页面后&#xff0c;却报出如下图错误&#xff1a; 即Uncaught SyntaxError: Cannot use import statement outside a module (at module.html?_ijtvfvtohb23jt1tj3r4ad3a0t82v:19:5)。 …

解决CitSpace分析新版本web of science文献报错“the timing slicing setting is outside the range of your data”

1.问题新版web of science于2021年7月7日上线&#xff0c;旧版 Web of Science 将同步运行到2021年底。现在旧版web of science入口早已关闭&#xff0c;新本web of science的残产品中也不在提供旧页面入口。近来在使用web of science文献制作CiteSpace图谱时发现&#xff0c;w…

【轻松解决el-dialog关闭后数据缓存 没清空】

问题描述 在使用el-dialog的时候&#xff0c;关闭弹窗之后&#xff0c;发现数据还是保存在上面&#xff0c;查资料试了那些方法&#xff0c;都不太行&#xff0c;最后发现以下方法&#xff0c;泪目。 解决方案&#xff1a; 方案一、使用this.resetForm("form")重置…

vue把el-dialog提取出来作为子组件,并实现父组件和子组件相互传值

最近做项目遇到了一个需求是&#xff0c;为了防止组件中代码冗长&#xff0c;需要将el-dialog对话弹出框单独封装成子组件&#xff0c;并将父组件中的id传递给子组件&#xff0c;子组件再根据id刷新父组件。具体项目代码太长&#xff0c;这里仅记录一下实现思路。 01 把el-dial…

vue 基于el-table实现多页多选、翻页回显过程

近半年时间在接触vue写pc页面&#xff0c;文中内容即在实际的开发过程中遇到的实际问题。 1、问题交代&#xff1a; 在pc版的列表页面中&#xff0c;假设当前在列表的第一页&#xff0c;想要在当前页面选择几行数据&#xff0c;跳转到其他页面选择几行数据&#xff0c;选择后…

【微信小程序】-- 全局数据共享 - MobX(四十三)

&#x1f48c; 所属专栏&#xff1a;【微信小程序开发教程】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &…

利用CSS在图片中添加文字

前端项目中想要在图片中添加文字&#xff0c;方法有两种&#xff1a;1、js&#xff1b;2、css。第一种方法比较复杂&#xff0c;主要是写将图片与文字组合成新的图片的js代码&#xff0c;第二种方法简单粗暴&#xff0c;这里只讲第二种方法。 利用css在图片中添加文字&#xff…

关于npm i 的那点事

在我们开发中会经常用到npm i 这个命令&#xff0c;有npm i -S&#xff0c;npm i -g , npm i -D&#xff0c;npm install --save-dev, npm i -save&#xff0c;那么这几种命令到底有什么区别呢&#xff1f; 要先知道这几种命令的区别&#xff0c;我们首先要认识两个单词&#…

vue3的tsx写法(v-show、v-if、v-for、v-bind、v-on),父子组件传值

1、如下就是vue3的tsx写法&#xff0c;tsx写法中支持使用v-show&#xff0c;如下&#xff1a; import {ref} from vuelet appData ref<string>(); let flag false; const renderDom () > {return (<div><input type"text" v-model{appData.val…

详细教会你在vue中写jsx

目录 前言&#xff1a; 一、用render函数写一个页面&#xff1a; 二、在render函数注册事件 三、vue指令在render函数是怎么代替的&#xff1a; 1、v-if 2、v-show 3、v-for: 4、v-model&#xff1a; 5、.sync 四、render中插槽的使用 1、默认插槽 2、具名插槽 3、作…

Less预处理——初识Less

系列文章目录 文章目录系列文章目录一、Less 简介二、安装 Easy LESS三、第一个小例子一、Less 简介 Less 是一门 CSS 预处理语言&#xff0c;它扩充了 CSS 语言&#xff0c;增加了诸如 变量、混合&#xff08;mixin&#xff09;、函数 等功能&#xff0c;让 CSS 更易维护、方…

react-router-dom V6

目录 1. 前言 2. 变更概览 将 Switch 升级为 Routes 路由匹配组件参数 由 component 改为 element 相对路径识别&#xff08;子路由不需要补全父路由的path&#xff0c;react会自动补全&#xff09; 用 useNavigate 替代 useHistory 废弃 Redirect 标签&#xff0c;使…

Vue基础笔记

创建一个Vue应用 1.应用实例 每个Vue应用都是通过createApp函数创建一个新的应用实例 import { createApp } from vue const app createApp({ //根组件选项}) 2.根组件 若使用的是单文件组件&#xff0c;可直接从另一个文件中导入根组件 import {createApp } from vue import …

Vue3通透教程【十】跨级组件通讯—依赖注入

文章目录&#x1f31f; 写在前面&#x1f31f; provide函数&#x1f31f; inject 函数&#x1f31f; 跨组件通讯&#x1f31f; 写在最后&#x1f31f; 写在前面 专栏介绍&#xff1a; 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章&#xff0c;应粉丝要求开始更新 Vue3 的相…

java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderListener的一个独特解决方法

除了网上所说的各种类型的解决方案&#xff0c;还有一种解决方案。 1、在pom.xml中添加一句 <packaging>war</packaging> 2、重新配置tomcat&#xff0c;选择war 3、确保web的路径是对的 file-->project structure 如果3处标红了 改为web文件夹的正确路径即可…