![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 66
只有蜡笔的小新
这个作者很懒,什么都没留下…
展开
-
vue-router 路由小知识
1、主动刷新路由。开发中有时候我们需要手动去刷新页面,实现页面数据的重载,用比较传统的window.reload()和$router.go(0)这两个方法会使页面刷新,但会进入一段空白页,影响用户体验,我们可以使用provide/inject 这个小技巧。这样刷新页面也不会出现空白页。app.vue<template> <div id="app"> ...原创 2018-12-27 15:53:33 · 205 阅读 · 0 评论 -
vue 跨域设置cookie
最近做项目登录认证的时候,出现登录了但是后续的接口请求却无法认证的情况,查看请求头发现因为没有把登陆时返回的cookies设置到第二次请求的头里面,所以,这就需要我们使用withCredentials这个属性了。vue:axios.defaults.withCredentials = true;jquery请求带上xhrFields: {withCredentials: true}...原创 2019-01-16 17:58:27 · 12726 阅读 · 0 评论 -
vue定时器销毁问题
定时器问题:我在a页面写一个定时,让他每秒钟打印一个1,然后跳转到b页面,此时可以看到,定时器依然在执行。这样是非常消耗性能的。如下图所示: 解决方法1:首先我在data函数里面进行定义定时器名称:data() { return { timer: null /...转载 2019-02-22 10:28:22 · 2248 阅读 · 0 评论 -
vue中页面加载进度条效果的实现
有图有真相,上图为页面跳转时显示的进度条。我们在vue项目中,为了减少首屏加载的时间,通常会开启路由的懒加载。路由懒加载配合gizp确实能帮助我们大大的加快首屏的加载时间。然而,路由懒加载会使得我们在第一次打开一个新页面的时候,会有一个加载时间。如果在这个时候我们没有一个提示的话,给人的感觉会是好像我点了页面跳转但是没反应。所以,这个时候我们可以加一个进度条来告知用户。具体实...转载 2019-02-19 09:45:38 · 12933 阅读 · 2 评论 -
Vue.js中 watch 的高级用法
假设有如下代码:<div> <p>FullName: {{fullName}}</p> <p>FirstName: <input type="text" v-model="firstName"></p></div>new Vue({ e转载 2019-02-20 15:13:35 · 234 阅读 · 0 评论 -
vue 不同环境打包配置
vue项目里面,通过vue-cli中的npm run build 可对项目进行打包,可是在实际工作中可能有生产环境,测试环境甚至更多,每个环境的请求地址都是不同的,如果我们每次都手动修改请求地址并打包,将非常繁琐,所以我们需要稍微配置一下,可以实现项目不同环境的打包配置:1、首先安装cross-env,命令:npm i --save-dev cross-env;2、在config文件夹里...原创 2019-03-17 00:23:06 · 3924 阅读 · 0 评论 -
vue 单页应用(spa)前端路由实现原理
写在前面:通常 SPA 中前端路由有2种实现方式:window.history location.hash下面就来介绍下这两种方式具体怎么实现的一.history1.history基本介绍window.history 对象包含浏览器的历史,window.history 对象在编写时可不使用 window 这个前缀。history是实现SPA前端路由是一种主流方法,它有几个...转载 2019-04-27 00:27:52 · 393 阅读 · 0 评论