Vue学习中的错误

1.页面无法渲染

控制台已取到值，页面无渲染是因为后台传的json对象名和前台接收的不一致
调用某个方法 他的 obj.xxx就是控制层中map传过来的值
ForEach报错也是这个对象和后台穿过来的不一样，可能是写错了

2.vue-service查不到数据

看方法需要的是传对象还是参数，参数用 +param 对象用 ,param

3.运行vue时浏览器报错Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option

原因：被引用的组件页面没有进行export，导致寻找不到浏览器console报错，但是编译的时候没有语法问题不报错
解决：
方法1： export { default as AppMain } from ‘./AppMain’
方法2：将vue/dist/vue.esm.js注销，修改为vue/dist/vue.min.js

4.运行vue时浏览器报错Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option

原因：被引用的组件页面没有进行export，导致寻找不到浏览器console报错，但是编译的时候没有语法问题不报错
解决：
方法1： export { default as AppMain } from ‘./AppMain’
方法2：将vue/dist/vue.esm.js注销，修改为vue/dist/vue.min.js

5.vue router 报错Uncaught (in promise) NavigationDuplicated {_name:"“NavigationDuplicated”… 的解决方法

参考网站：https://blog.csdn.net/weixin_43202608/article/details/98884620
在点击 router-link 会造成报错的问题， 报错内容为：
（1）解决方法很简单，把项目依赖的 node_modules 文件夹删除， 然后再 npm install 重新下载依赖包就可以解决
（2）发现以上方法很多人都不能成功解决，经过多次尝试发现原因可能是 在重新下载依赖包时，安装的vue-router还是之前出错的那个版本，那么要怎么解决呢？解决方法也很简单，在项目目录下运行 npm i vue-router@3.0 -S 即可
（3）在main.js下添加一下代码：
import Router from ‘vue-router’
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}

6.Vue报错 [Vue warn]: Property or method “name” is not defined on the instance but referenced…

原因:在data中没有定义一个name, 致错
 解决方法:在data中定义一个name=" ",

[Vue warn]: Property or method “value” is not defined on the instance but referenced…
原因:template中定义了属性，如v-model，但在data中没有定义一个value
解决方法:在data中定义一个value=" ",
以下转载高手文章
https://blog.csdn.net/zn740395858/article/details/80486179

7.Error in render: “TypeError: Cannot read property ‘list’ of undefined”

**报错7：**渲染错误：“未定义的Type Error：无法读取属性”列表
**原因：**没给list定义，也就是说在temple中用到list了，但是在data中没定义这个字段，如果已经定义了但是还是报错，请检查下自己是否拼错了单词，因为我就是这么蠢了= =
解决：

data () {
return {
list: []
}
},

8.[Vue warn]: Property or method “message” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property

报错：message没定义
原因：跟上面的一样，message在data那里没有定义，定义一个初始值就好
解决：

data() {
return {
message: ‘’
}
},

9.Module build failed: Error: No parser and no file path given, couldn’t infer a parser.

报错：没有语法分析器和文件路径，无法推断解析器
原因：依赖包出现问题，prettier 一个vue-cli的依赖，把一个feature 的移除当作次版本发布
解决：npm install --save-dev prettier@1.12.0（删除 node_modules下_prettier@1.13.0@prettier文件夹）

10.routes forEach is not a function

原因：forEach routes没有发现里面有值
解决：
1.查看import {routes} from './routes’这个路径是否正确
2.routes是一个数组，检查routes是否是一个数组
3.是否已经new了一个router，又再次new一遍?

// main.js
// 路由配置
const RouterConfig = {
// 使用HTML5的History模式
mode: ‘history’,
routes: Routers
}
// new VueRouter
const router = new VueRouter(RouterConfig)

// router.js
// 在router中又再次new一遍，重复了！！！！
export default new Router({
routes: [
{
path: ‘/’,
name: ‘home’,
component: home
}
]
})

改为：
// router.js
const routers = [
{
path: ‘/home’,
meta: {
title: ‘主页’
},
component: (resolve) => require([’…/page/home.vue’], resolve)
]
export default routers