随笔分类 - vue踩坑总结
摘要：问题：vue表单校验时报错，如下图所示： 原因：动态表单验证时，在el-form-item 里面需要循环prop名字，prop名字一定要使用 el-form 中 :mode 所绑定的 dynamicValidateForm 中的值。 书写注意：应该是 prop="email"，而不是 prop="d
阅读全文
摘要：vue异常报错，如下图所示： 报错原因：router-link 中的v.router路径为Null导致的to报错问题 解决办法：router-link处一定要加上v-if="v.router"
阅读全文
摘要：路由切换大方面可分为两类：一类是标签，另一类是编程导航。 第一种：router-link标签 router-link 和a标签一样，点击后跳转，to 属性指定跳转路由的地址，具体代码如下： <router-link to="/home">点击跳转home</router-link> 第二种：编程导航
阅读全文
摘要：路由独享守卫，是指在单个路由配置的时候也可以设置的钩子函数，其位置就是下面示例中的位置，也就是像Foo这样的组件都存在这样的钩子函数。目前他只有一个钩子函数beforeEnter： const router = new VueRouter({ routes: [ { path: '/foo', co
阅读全文
摘要：全局守卫，是指路由实例上直接操作的钩子函数，他的特点是所有路由配置的组件都会触发（直白点就是触发路由就会触发这些钩子函数），如下的写法。钩子函数执行顺序包括beforeEach、beforResolve、afterEach三个。 const router = new VueRouter({ ...
阅读全文
摘要：1、导航守卫是什么？ 官方是这么说的： 正如其名，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。 好吧，看不懂，那就好好来理解下吧。 其实，导航守卫就是路由跳转过程中的一些钩子函数，再说的直白点路由跳转是一个大的过程，这个大的过程分为跳转前、中、后等细小的过程，在每一个过程
阅读全文
摘要：1、什么是keep-alive？ keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。 2、keep-alive的优点？ 在组件切换过程中 把切换出
阅读全文
摘要：如果需要设置全局变量或全局方法，并且不想污染全局作用域，这种情况下，可以通过在原型上定义它们使其在每个 Vue 的实例中可用。在main.js中添加。 1、基本示例 在main.js中添加一个变量到 Vue.prototype，代码如下： Vue.prototype.$appName = 'My A
阅读全文
摘要：需求：将多个文件打包成zip压缩包下载的功能 以下是后台返回的需要下载的文件的数据结构: //zipName是zip压缩包的名字，fileUrl是需要下载的文件地址，fileName是文件的名称 { "status": 1, "message": "导出成功", "data": { "zipName
阅读全文
摘要：download(url){ const link = document.createElement('a'); // 这里是将链接地址url转成blob地址， fetch(url).then(res => res.blob()).then(blob => { link.href = URL.cre
阅读全文
摘要：最近在做项目的时候遇到Excel导出功能，后端返回的是文件流，前端如何实现下载功能，以下是项目用的源码，有需要可直接复制使用。 // 下载 downLoad(id) { this.$axios .get( this.baseUrl + "social/download?id=" +id, {resp
阅读全文
摘要：图片转换生成ico格式图标：https://www.bitbug.net/
阅读全文
摘要：问题：在使用Vue开发中添加的favicon.ico无法显示，问题根源在于路径，如果使用http链接作为favicon地址一般不会出现问题，出现问题的基本都是在使用本地图片作为favicon。原因可能是由于打包的时候没有配置favicon选项或者favicon路径配置错误。 解决方法： 修改webp
阅读全文
摘要：做一个比较正规的网站，需要在标题栏前面加上相应的小图标，效果大致如下： 其实实现起来很简单，只需要在html文件中的<head></head>标签中加上<link>标签，具体代码如下： <link rel="icon" href="./src/assets/favicon.ico" type="im
阅读全文
摘要：Vue项目打包报错，如下图 原因：修改confing/prod.env.js的API_URL:’"//xxxxxxxxx"'里少加双引号或单引号
阅读全文
摘要：第一步：安装cross_env npm install cross_env 第二步：修改项目package.json文件 "scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.co
阅读全文
摘要：/deep/ .el-table__fixed-body-wrapper{ overflow:hidden; }
阅读全文
摘要：输入vue create hello-world 命令新建项目，然后使用向下箭头去选中Manually select features配置项，此时效果是按照默认的配置default（babel,eslint）走，直接进入了下一项配置（个人感觉点击向下箭头和点击回车键没啥区别呀） 解决方法： 按照官网
阅读全文
摘要：原因： 由于vue对语法的限制过于严格，所以运行时会报错 解决办法： 进入项目中的build目录，找到webpack.base.conf.js文件，注释或删除eslint规则
阅读全文
摘要：最近在做项目的时候遇到Excel导出功能，后端返回的是文件流，前端如何实现下载功能，以下是项目用的源码，有需要可直接复制使用。 // 下载 downLoad(id) { this.$axios .get( this.baseUrl + "social/download?id=" +id, {resp
阅读全文
浙公网安备 33010602011771号