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 => {  })
相关推荐
枷锁—sha3 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha4 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜20 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB2433 分钟前
html复习
javascript·microsoft·html
汉得数字平台38 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦7 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录8 小时前
括号生成算法
前端·算法