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的原因

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 文件，没有就在根目录创建一个，写上下面标注的代码，保存，在重新编译。项目就可以正常运行了。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,lintOnSave: false
})

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

   this.$router.push({name: item.name//名字路由指引// path:item.path//路径路由指引})

1.3.1. 错误原因

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

1.3.2. 解决方法

  重写push方法，加上catch函数

this.$router.push({ path: '/user' }).catch(data => {  })

//全局引用router跳转this.$router.push({name: item.name//名字路由指引// path:item.path//路径路由指引// eslint-disable-next-line no-unused-vars}).catch(e => {  })