路由守卫一般用于判断用户是否登录，如果已登录，则进入页面，如果没有登录，则跳转到login页，并且记住跳转之前的路径页，方便登录成功后自动跳转到之前的页面。router.beforeEach((to, from, next) => { const user = store.getters.user if (to.matched.some(r => r.meta.private) && !user) { next({ name: 'login', params: { wantedRout...
本地创建的demo项目一般来说不需要git，但是默认的话，是会自动创建的，我暂时没有发现有什么办法可以在已经创建好的项目上直接去除，但是可以在项目创建时进行选择。vue create demo -n-n表示不需要git仓库。
本来是想基于谷歌的firebase服务进行单页app开发，但是遇到了一些问题，但是大概的结构已经摸清楚了，经历了几天头痛欲裂的查看官方文档日子。。。痛并快乐着，又成长了许多。首先介绍一下目前已经做好的功能：功能用户注册用户登录无登录状态可获取公共内容，也就是书签书签分类添加书签二级分类添加书签具体信息添加，包括：logo，title，href三个值，并且增加了对应的表单验证书签分类修改&删除书签二级分类修改&删除书签信息修改&删除搜索功能用户登录后才允许出现新建和编辑功能用户登录有效期（暂时只设置了临时有效）目前就很潦草的开发了这些功能，因为一个人要做很多事情，还要阅读大量莫名其妙的文档...
在使用搜索跳转路由时我遇到了一个问题，我的使用要求是，当我在顶部搜索框输入文字并回车时，要跳转至搜索页，并且搜索页要根据我传入的路由的查询参数进行处理。首次运行的时候很正常，路由页面能够进入，处理也能进行。但是当我第二次的时候，也就是已经进入搜索页的情况下，再次回车搜索时，就会报错，因为我重复进入同一个路由页面了。那么第一个问题：如何避免重复进入同一个路由报错如何避免重复进入同一个路由报错找了半天发现一串有意思的代码：this.$router.push({query: {plan: 'private'}})也就是说，我们路由跳转的时候，只传一个对象，这个对象只包含qu...
一般来说，vue的本地资源引入是由index.html文件进行引入的，但是我做页面的时候遇到一个问题，就是在首页刷新没有问题，在其他路由页面刷新，就会出现报错，提示 某某某js文件或者方法不错在，或者资源文件，如css，img这些引入出错。原因就是因为引入时在开头加./，按道理来说，加这个也没有问题，因为在vue-cli3里面，index.html文件是和静态文件在同一个目录的，这样引入并不会报错。但是错也错在这里，由于打包后，目录结构发生了变化，之前的./可能无法正确的获取，所以解决办法就是不要.了。目录结构示意图：正确的引入方式：<link rel="styleshe...
一般我们认为启用history模式只是去掉地址栏的#符号，然后Nginx服务器为了实现这个效果需要添加一段代码用于支持该效果。但实际上并不是表面上那么简单，给Nginx添加这段代码后，我们可以直接在地址栏输入路由链接，从而进入到对应的路由页面，如果没有使用该段代码，地址栏的#号依旧会消失，但是你无法通过直接输入路由地址直接进入到对应的页面。代码：## 启用history模式（ 什么请求都只返回index.html） location / { try_files $uri $uri/ /index.html; }
升级到3之后，静态的文件都统一存放在public目录下，但是这个目录下，你在index.html的时候很好引入，在组件中，就不行了，因为webpack打包后路径就变了，所以我们要使用一个动态的参数。动态参数绑定这种情况一般出现在我们用v-for遍历一个对象，在对象里面会有对于的图片的地址，但是这个地址一般来说可能只写图片的名字，因为路径是一样的，直接在遍历的时候统一就行了，但是这个时候我们会发现地址是失效的。<img v-for="item in imgarr" :src="'../../images/'+item.src"...
vue中绑定一个属性使用的是v-bind:指令，简写形式为:；使用该指令可以绑定data中的key，从而获取它对于的value值，但是这个绑定它是单向的，如果你元素本身修改了内容，并不会影响到data中对于的值。在与表单的交互中只有单向绑定是不实用的，于是有了双向绑定，我们可以给一个input表单元素通过v-model双向绑定一个key，并且当我们修改input中的内容时，绑定的值也会跟着发生变化。其原理也非常简单。v-model绑定：<input type="text" v-model="name" />v-mode原理<inp...
手机端只要有输入框,弹出虚拟键盘后,一般来说都会压缩整个页面的高度,这就导致了一个问题,如果浮动于底部的标签就会被压上来,以及一些根据页面高度百分比定位的元素错位,解决这个问题目前我就只有一个办法: 固定整个页面的高度在页面每次加载后获取window的innerHeight高度,然后手动给body设置这个固定的px值,并将这个值储存起来,然后再加一个window的resize事件,当页面被压缩,该事件就会触发,此时我们就判断,如果此时的windw的innerHeight高度小于之前的值,那么就将浮动底部的元素隐藏起来.注意window.innerHeight和document.body....
页面写好后我在ipad上测试,安卓上测试,都没有出现这个问题,但是在iPhone上就会出现,我点击表单,整个页面就会被自动放大,我当时一脸懵逼,代码没错啊,于是百度了了好久,很多人都只是提供了某一小段meta标签,实际使用并无效果,实测需要两条配合使用就可以解决这个问题,代码如下:<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width...
之前写过一次加密,这次就重新调整并发布出来,一般来说,cookie用于存储账号信息是不安全的,但是后端一般很少会给你做这个功能性的适配,只能前端硬着头皮写了,为了安全,加密是必不可少的了,这里我们就是用crypto-js的aes加密.首先安装我们需要的插件,npm安装,其他安装自行查看npm install crypto-js --save-dev npm install vue-cookies --savecrypto-js官网vue-cookie官网安装完成后我们在需要调用的vue文件中引入,比如login.vue文件中,但是这里我们根据项目的要求,cookie需要全局引入,而加密由...
我今天才知道,微信内置的浏览器无法点击下载链接下载文件的,虽然有一些办法,但是最简单粗暴的就是提示用浏览器打开即可.微信端要求1ios最好只用safari浏览器打开安卓用浏览器打开即可解决办法就直接判断,如果是ios就提示用safari,安卓就用其他浏览器打开,直接做ua判断即可!let ua = navigator.userAgent; if(isEquipment(ua) === "ios"){ //ios提示 }else if(isEquipment(ua) === "android")){ //安卓提示 } //判断是安卓还是ios f...
npm命令无法执行vscode终端中，输入npm提示无法执行，主要原因是没有权限，用管理员模式打开vscodevue-cli安装完无法输入命令运行主要原因是系统设置了禁止运行脚本，win10用管理员模式打开PowerShell，输入get-ExecutionPolicy会返回Restricted;意思是禁用了，输入set-ExecutionPolicy RemoteSigned后输入y表示开启，然后vue命令可用
上次我通过监控click的触发时间来判断是否双击后,在ipad上测试是已经解决了的,但是iPhone上居然又不行了,他需要点击三次才会触发双击事件,按道理,判断时间是没有问题的,400ms也刚刚好,于是又去研究.同事告诉我说苹果的会有click延迟,为此我测试了一下,点击一下,然后等久一点点再点击,也能触发双击,但是这个一点点的时间肯定是超过了400ms,只能说首次的click被延迟执行了.具体为什么要这样做,估计是要和ios系统本身的双击放大有关系的,反正dblclick完全不触发的,无奈又要去找解决方案.于是就找到了FastClick,他是一个在github上发布的轻量级解决方案,引...
使用npm run dev运行本地项目的时候遇到两个报错，第一个是-4058，另一个是npm ERR! Exit status 1，具体报错如下：npm ERR! node v6.11.0 npm ERR! npm v3.10.10 npm ERR! path C:\Users\BYN.YANA-PC\package.json npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall opennpm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! travel@1.0.0 dev:...
ImagePreview 是一个图箱插件,自动创建遮罩层,但是当我把它封装到一个插件里面(imgbox.vue);在两个页面都引入这个同一个组件,遮罩层会在某一个页面显示,另一个页面消失.仔细想了下,应该是他只会创建一个遮罩层,然后创建后就不在处理了,只是显示和隐藏操作,这就导致第一个页面的遮罩层被第二个页面拿走了,没法拿出来,唯一的办法就是重载了.通过v-if对这个imgbox进行重载渲染,创建一个判断属性,每次判断这个来是否挂载组件.这个判断属性要在当前页面mounted生命周期时挂载一次,但是这也只能挂载一次,所以我们还要监控路由的变化,如果又到了这两个页面,就再进行一次挂载,离开...
组件地址:点击SwipeCell 滑动单元格介绍他是一个封装好的组件,当手指往左滑动的时候,调出右边的菜单,往右滑时调出左边的菜单.用法除了官网提供的基本写法,还可以通过slot插入自定义的元素用于内容显示.这里就会遇到一个问题,如果我们滑动的内容里面有一个click的事件用于进入到下一个页面.当单元格处于拉开的状态,也就是左右有单元格滑动了,点击时依旧会触发click事件,但是已QQ为例,qq在左右拉开的时候,点击只会让拉开的元素还原,并不会触发click事件,所以我们要解决这个问题.解决问题由于click是由我们自己写的元素触发,click事件也是我们自己写的,所以操作上就很方便了,...
在3.出牌的时候，书上只是给hand组件中的card组件元素绑定了自定义的play事件，然后触发hand的methods中的handlePlay方法，并将当前card作为参数传入。但是他没有讲这个play方法触发。只是讲点击卡牌是可以触发这个自定义的play事件，而且他的css里面设置了pointer-events: none;导致这个事件没法触发到，况且本身不讲怎么触发play也无法进行下一步。简单的解决办法就是在card组件的methods中写一个自定的方法，然后在里面使用$emit触发play事件，然后css设置.hand{pointer-events: all;}就可以了，然后效...
最近评论