600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > 使用vue中遇到的一些问题以及解决方案

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

时间:2020-11-17 14:33:42

相关推荐

使用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错误代码如图:

正确的代码如图:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。