使用vue中遇到的一些问题以及解决方案

1. 路由的重定向重复路由- 报promise uncaught异常

解决方案：

// 该段代码不需要记，理解即可
//在vue - router在3.1.0版本之后，push和replace方法会返回一个promise对象，如果跳转到相同的路由，
// 就报promise uncaught异常
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {return originalPush.call(this, location).catch((err) => err);
};

2. 路由跳转报500错误

解决方案：

1.查看是否请求头有问题

2.查看传递的参数类型是否合适

3.服务器出错

3. vue使用vant插件中的img懒加载时出现空出位置的bug

原因：因为在初始化懒加载时，图片还没有被渲染上，就会保持原本的大小，

解决方案：将图片懒加载取消，改为动态src属性

4. vue组件传参后，组件初始化渲染接收不到数据问题

原因：vue组件中传递的值要是获取的数据，在初始渲染时，参数数据还没有被请求获取到，所以使用data中的默认值一般是''''，所以拿不到值

解决方案：需要等一会让组件把数据获取到在渲染页面，可以在组件中加入v-if='参数数据.length！=0'，这样就可以在获取到再渲染

5. mounted钩子中请求数据出现闪屏

解决：加载时机的问题，放在created中，挂在前请求完成就不会出现闪屏了

6. 需要在请求头中加入token

解决方案：在配置axios请求实例时，添加请求拦截器

// 添加请求拦截器
instance.interceptors.request.use(function (config) {//请求之前执行该函数， 一般在该处设置token let token = sessionStorage.getItem("token");if (token) {config.headers.token = token//  这个token名字是文档要求的，复杂的用中括号包起来config.headers['X-Nideshop-Token'] = token  }// 在发送请求之前做些什么return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});

请求头现在就有token：

7.在css样式无法修改的bug

解决方案：使用深度选择器：/deep/ class{}

8.安装vue-router浏览器报错

终端报错：

原因：是vue-router的版本过高，下载默认的4.几的版本了，选择3版本的就好了

解决方案：npm i vue-router@3

9.vue中常会遇到这个错误

常见原因：一种是data中的数据和methods中的方法重名；另一种是axios请求是按需导入的没有加{ }。

解决办法：重名问题就将名字修改即可；axios的加上{ }

axios错误代码如图：

正确的代码如图：

使用vue中遇到的一些问题以及解决方案相关推荐

bug解决-Vue中img图片加载失败解决方案
Vue 中img图片加载失败解决方案 bug:assets文件下的图片动态取得话,显示不出来. 解决方法:把图片放到public文件夹下 public是直接原封不动打包到dist里面
vue中Mapbox的字体本地化部署解决方案
(1)Mapbox示例理解 <!DOCTYPE html> <html><head><meta charset="utf-8" /> ...
VUE中IE浏览器下载文件的解决方案
IE浏览器无法通过a标签下载文件 1. 问题 2.解决方案 1. 问题浏览器的兼容性问题一直是个令人头痛的问题,开发的小伙伴应该都比较喜欢用chrome浏览器,兼容性比较强大,而就有些问题发生在其他 ...
keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处在做电商有关的项目中 ...
怎么将vue模板转换为html,vue中自定义html文件的模板
如果默认生成的 HTML 文件不适合需求,可以创建/使用自定义模板. 一是通过 inject 选项,然后传递给定制的 HTML 文件.html-webpack-plugin 将会自动注入所有需要的 C ...
props写法_简单理解vue中Props属性
本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下使用 Props 传递数据组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 pr ...
vue ts 设置tslint提示_Typescript 在 Vue 中的实践(包含2.x、3.x)
1 使用 typescript 的优势聊到 ts 时有一个不能规避的问题:为什么要使用 ts ,相比 js 有什么优势吗?下面我从两个方面试着回答一下这个问题: 1.1 项目开发时的便利避免低级 ...
VUE中使用Echarts绘制地图迁移
踩坑说明很久以前写jsp时使用过echarts的china.js插件,不过echarts是2.0的,目前vue项目中使用echarts3.8.5,直接将china.js插件引入,代码复制,运行一看, ...
vue中动态样式不起作用？ scoped了解一下
vue中style标签使用属性scoped的注意事项 style上添加属性scoped可以实现样式私有化,但是在使用动态样式时,样式会不起作用.可以先去掉scoped 转载于:https://www. ...
Vue中组件数据的传递
Vue中组件的作用域是隔离的,父组件中的数值子组件看不到!也就是说,用angular作比喻,组件的scope天生是scope:()的! 如果父组件需要往子组件中传数据,此时应该使用标签属性: < ...