分类：VUE

2020
11-10

解决vue 使用axios.all()方法发起多个请求控制台报错的问题

解决vue 使用axios.all()方法发起多个请求控制台报错的问题 今天在项目中使用axios时发现axios.all()方法可以执行但是控制台报错，后来在论坛中看到是由于axios.all()方法并没有挂载到axios对象上，需要我们手动去添加==只需要在你封装的axios文件里加入==instance.all=axios.all就完美解决了！补充知识：vue项目中使用axios.all处理并发请求报_util2.default.axios.allisnotafunction异常报错：_util2.default.axios.allisnotafunction代码：init(){util.axios.all(... 继续阅读 >
2020
11-10

Vue路由权限控制解析

前言本人在公司主要负责中后台系统的开发，其中路由和权限校验算是非常重要且最为基本的一环。实际开发项目中，关于登录和路由权限的控制参照了vue-element-admin这个明星项目，并在此基础上基于业务进行了整合，接下来我会以这个项目为例，仔细地剖析整个路由和权限校验的过程，也算是对这个知识点的一些总结。项目总体目录结构进入今天主题之前，我们先来梳理下整个项目,src目录下的。api:接口请求assets:静态资源compon... 继续阅读 >
2020
11-10

在vue项目中promise解决回调地狱和并发请求的问题

在vue项目中promise解决回调地狱和并发请求的问题 场景需求：需要同时请求5个接口都请求成功后执行下一步操作解决方法：定义一个变量i=5，请求成功一个接口，让i?，直到i=0时执行下一个操作，否则不执行axios.all并发请求，.then(axios.spread(function(callback1,callback2)){})promise.all并发请求，.then(function([callback1,callback2]){})1、回调地狱：函数作为参数层层嵌套代替的为.then的链式操作2、promise.all并发请求引入接口import{getSellerDetail}from'../../... 继续阅读 >
2020
11-10

vue 中的动态传参和query传参操作

vue 中的动态传参和query传参操作 Vuerouter如何传参params、query是什么？params：/router1/:id，这里的id叫做params。例如/router1/123,/router1/789query：/router1?id=123，这里的id叫做query。例如/router1?id=456query方式传参和接收参数传参:this.$router.push({path:'/xxx'query:{id:id}})this.$router.push传参时,并不会引起页面刷新。需要重新请求数据，代码如下。<div>shopName:{{shop.shopName}}</div>exportdefault{dat... 继续阅读 >
2020
11-10

你不知道的SpringBoot与Vue部署解决方案

你不知道的SpringBoot与Vue部署解决方案 前言前段时间公司外网部署的演示环境全部转到内网环境中去，所有对外演示的环境都需要申请外网映射才能访问某个服务。我用一个外网地址www.a.com映射到一个内网地址http://ip:port，然后在这个地址http://ip:port用nginx做代理转发到各个组的项目http://ipn:portn上去，其中也遇到一些静态资源404，主要是是解决这个404问题。最近又做了一个项目，考虑到用户的体验，减少部署的复杂性，我想了一个办法用SpringBoot... 继续阅读 >
2020
11-10

在vue中使用eslint,配合vscode的操作

在vue中使用eslint,配合vscode的操作 不管是多人合作还是个人项目，代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。这所谓工欲善其事，必先利其器，个人推荐eslint+vscode来写vue，绝对有种飞一般的感觉。每次保存，vscode就能标红不符合eslint规则的地方，同时还会做一些简单的自我修正。安装步骤如下：首先安装eslint插件安装并配置完成ESLint后，我们继续回到VSCode进行扩展设置，依次点击文件>首选项>设置打... 继续阅读 >
2020
11-08

Vue实现购物车基本功能

Vue实现购物车基本功能 Vue实现购物车商品加、减、单选、全选、删除、价格更新等功能Dome和Vue代码<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>商城</title><linkrel="stylesheet"href="./css/common.css"><linkrel="stylesheet"href="./css/cart.css"></head><body><divid="main"><divclass="container"><divid="cart"><h1>购物车</h1><formaction="#"method="post"><tableclass="form"><thead><tr><thwidt... 继续阅读 >
2020
11-08

vue实现顶部菜单栏

vue实现顶部菜单栏 vue实现顶部菜单栏，同一个页面两个菜单按钮之间的切换先看展示结果：点击第一个按钮，显示内容1点击第二个按钮，展示内容2下面上源码：注意哦，一定要代码规划，别学我(⊙o⊙)<template><div><divclass="tab-content"><divclass="tab-content1"@click="cur=1":class="{active:cur==1}"><span>数据标注</span></div><divclass="tab-content2"@click="cur=2":class="{active:cur==2}">案件数</div></div><divclas... 继续阅读 >
2020
11-08

解决vue props传Array/Object类型值,子组件报错的情况

解决vue props传Array/Object类型值,子组件报错的情况 问题：PropswithtypeObject/Arraymustuseafactoryfunctiontoreturnthedefaultvalue.1、在vue中如果当在父组件通过props传Array/Object类型值给子组件的时候2、如果子组件的props接收default为，如下报错原因：propsdefault数组／对象的默认值应当由一个工厂函数返回解决：补充知识：vue的props如何传多个参数vue父作用域将数据传到子组件通过props进行传参，如果需要传多个参数可以数组形式赋值给props，通过这样... 继续阅读 >
2020
11-08

解决Vue watch里调用方法的坑

这里是说watch调用methods里方法的时候，页面经常会报找不到方法这个时候一定要在watch里去输出一下this，看看this包裹的壳是不是多了好多层，所以找不到方法，虽然我到现在还没理解为啥有时候会出现一层或几层壳的问题。例如正常情况下用this.functionname()就可以调用了。但是在一些情况下（现在本人还没找到原因）在控制台输出this的时候你会发现数据经常是这样包裹的a{name},name里面对你的methods还包裹了一层，所以使用方法... 继续阅读 >
2020
11-08

浅谈vue.watch的触发条件是什么

很多人习惯用watch，但是却很少有人知道watch的真正触发条件。如果不是对vue原理了如指掌，请谨慎使用watch。示例1，下面会触发watch吗？<script>newVue({data(){return{city:{id:1,name:'Beijing'}}},watch:{city(){console.log('citychanged')}},created(){this.city={id:1,name:'Beijing'}}})</script>会触发，因为在created方法里面重新给city赋值了一个对象，city前后的指向不同了示... 继续阅读 >
2020
11-08

解决vue watch数据的方法被调用了两次的问题

背景：路由结构/video/1.mp4,即/video是父路由，/1.mp4是/video的动态子路由，在/video父路由中会通过url的params获取视频信息,即通过/1.mp4获取对应的视频完整信息，然后通过props传到动态子路由中，然后子路由通过接受到的视频对象，进行展示问题：当路由切换时，即当我点击其他视频时，导致动态子路由变化时，我监听了/video父路由的变化并重新根据url的params获取视频对象，并自动通过props传入子路由中，我在子路由中通过watc... 继续阅读 >
2020
11-08

vue 避免变量赋值后双向绑定的操作

如：this.list=this.list2,结果在list改变后list2也改变，这不是我们想要的效果第一种：利用JSON.parse和JSON.stringifythis.list=JSON.parse(JSON.stringify(this.list2))第二种：ES6的解析语法this.list={...this.list2}this.arr=[...this.arr2]补充知识：解决vue中v-model绑定的变量赋值给了另一个变量后，两个变量同时改变先来看一下问题背景我们要做一个搜索+分页的功能，使用vue我们将分页控件绑定了点击事... 继续阅读 >
2020
11-08

浅谈Vue static 静态资源路径 和 style问题

浅谈Vue static 静态资源路径 和 style问题 我就废话不多说了，大家还是直接看代码吧~//PathsassetsRoot:path.resolve(__dirname,'../dist'),//静态资源输出到二级目录下assetsSubDirectory:'static',//静态资源cdn地址assetsPublicPath:'/',引用的时候可直接，不用返回上一级去查找，因为编译输出后的static下的资源跟html是在同一个目录<imgclass="navbar-brand-logo"src="static/logo.png"></a>如果单个vue文件里的style没有用到最好删除掉不然h... 继续阅读 >
2020
11-08

解决VUE 在IE下出现ReferenceError: Promise未定义的问题

解决VUE 在IE下出现ReferenceError: Promise未定义的问题 问题原因:IE一些低版本的浏览器对于ES6语法不支持Promise是es6语法里为了解决异步函数多重嵌套的问题(回调地狱)说明:或许你并不没有使用Promise,但是有可能你使用Axios等,其中原理也是Promise,进行了封装而已解决办法:步骤一:安装babelpolyfillnpminstall--savebabel-polyfill如果你使用的是yarn安装的话:yarnaddbabel-polyfill备注:使用yarn安装的话不需要加?save现在都会默认携带,加上会不识别步骤二:配置build文... 继续阅读 >