学习Vue2.0报错笔记整理

2022.3月报错笔记整理

2022.3.5 Vue报错笔记

Vue-cli搭建好默认项目后，想要用路由功能，但是报错:

Can’t resolve ‘vue-router’ in xxxx(某路径)

这是因为缺少包的原因

你可以看一下你的package.json文件中是否安装了vue-router

运行命令

npm install vue-router@3
# 如果你的vue版本安装的是2.0，那么vue-router就要安装3.0版本
## 如果你的vue版本安装的是3.0，那么vue-router就要安装4.0版本
### 改变@后面的数字就行

安装成功后显示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1nLK29OZ-1649488060509)(https://s3.bmp.ovh/imgs/2022/03/b566dec104fa864e.jpg)]

2022.3.6 Vue报错笔记

Component name “Vueabout” should always be multi-word

今天在跑Vue-router项目的时候碰到一个Bug

开始排错的时候怎么都发现不了，到百度上到处搜索，后来用百度翻译翻译出来这句话的意思：

组件名称“Vueabout”应始终为多个字母

然后我看了一下我的代码块，果然是组件的命名问题
原来的代码：

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
     
  name: 'App',
  components: {
     
    HelloWorld
  }
}
</script>

更改后的

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
     
  name: 'AppNamne',
  components: {
     
    HelloWorld
  }
}
</script>

然后我们就发现不报错了：

页面也成功的运行了起来

vue 运行时，报错： > plan-vue@0.1.0 serve 解决方式

出现此问题的原因：由于长时间没有运行项目导致项目缺少依赖项,如下图:

解决方式：将项目中的node_modules和package-lock.json两个文件手动删除掉，然后在idea窗口中，执行npm install。重启idea即可。如下图:

删除之后重新安装依赖包

npm install vue-router

npm install

安装完成之后可以进入package.json文件查看

最后重新npm run serve,就会发现运行成功，如下图:

2022.3.7 Vue报错笔记

＜div＞ has no matching end tag.

div标签对应结束部分没加(/)

2022.3.8 Vue报错笔记

NavigationDuplicated: Avoided redundant navigation to current location: “h_son2”.

在VUE中路由遇到Error: Avoided redundant navigation to current location:报错显示是路由重复

解决方法：router文件夹下面的index.js中加上下面几句代码:

// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题
const originalPush