Vue Web开发遇到问题汇总

1.Vue Web开发遇到问题汇总

1.1. vue项目main.js文件下import router from './router'默认导入router文件夹下index.js的原因

vue项目main.js文件下import router from './router'默认导入router文件夹下index.js的原因

javascript 复制代码
import router from './router'
//等效于
//import router from './router/index.js'

这个不是vue的规定而是node加载模块的方式,当require('./router')(import会被转为require),node是这样的寻找目标的:

(1)首先寻找目录下有没有router.js或者router.node,如果有就导入

(2)如果没有看是否有router目录,如果没有就require失败,抛出异常"Cannot find module './router'"

(3)如果有router目录会在其下寻找package.json文件,如果有则按照package的配置来导入

(4)如果没有package.json,看是否有index.js或者index.node,如果有就导入没有就失败

详细见node文档:https://nodejs.org/api/modules.html#modules_folders_as_modules

1.2. error Component name "Home" should always be multi-word vue/multi-word-component-names

1.2.1. 错误

error Component name "Home" should always be multi-word vue/multi-word-component-names

1.2.2. 原因

在操作npm run serve 的时候会出现以下的报错,

报错原因是希望组件名写成驼峰式或者链-先形式的,

但是官方又明确单个单词组件命名是符合规定的,

总结在编译的时候eslint 会检测将次写法判定为不规格。

1.2.3. 解决方案

在项目根目录找到一个vue.config.js 文件,没有就在根目录创建一个,写上下面标注的代码,保存,在重新编译。项目就可以正常运行了。

javascript 复制代码
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
   lintOnSave: false
})
javascript 复制代码
   this.$router.push({
                    name: item.name//名字路由指引
                    // path:item.path//路径路由指引
                })

1.3.1. 错误原因

点击的所要跳转的路由和当前是相同的。

如果没有向router.push提供回调,错误只会发送到全局路由器错误处理程序。现在,因为推送和替换都返回一个承诺,如果导航失败(任何取消导航的操作,如next(false)或next('/other ')也计算在内)没有被捕获,您将在控制台中看到一个错误,因为该承诺拒绝没有被捕获。

1.3.2. 解决方法

重写push方法,加上catch函数

javascript 复制代码
this.$router.push({ path: '/user' }).catch(data => {  })
javascript 复制代码
//全局引用router跳转
                this.$router.push({
                    name: item.name//名字路由指引
                    // path:item.path//路径路由指引
                    // eslint-disable-next-line no-unused-vars
                }).catch(e => {  })
相关推荐
灵感__idea5 小时前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
向葭奔赴♡6 小时前
CSS是什么?—— 网页的“化妆师”
前端·css
黑犬mo6 小时前
在Edge、Chrome浏览器上安装uBlock Origin插件
前端·edge
excel6 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
大前端helloworld6 小时前
前端梳理体系从常问问题去完善-网络篇
前端·面试
excel6 小时前
🌿 一文看懂 Vue 3 的 watch 源码:从原理到流程
前端
繁依Fanyi7 小时前
让工具说话:我在 Inspira Board 里用 AI 把“能用、好用、可复用”落成了日常
前端
weixin_456904278 小时前
C# 中的回调函数
java·前端·c#
kura_tsuki8 小时前
[Web网页] LAMP 架构与环境搭建
前端·架构
yinuo8 小时前
UniApp+Vue3多分包引入同一 npm 库被重复打包至 vendor 的问题分析与解决
前端