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
})

1.3. Navigating to current location ("/user") is not allowed

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 => {  })