vue
vue当前路由跳转初步研究
一样闲话少说，直接上问题，如图： 也是消息面板，没想到一个小小的消息面板，碰到这么多坑，惆怅。 就是如果当前路由和跳转路由不一样时，正常跳转没有任何问题。但是如果一样时，就不会跳转了，用了很多方法，比如给router-view加key，beforeRouterLeave，watch路由等都没有效果。这个路由跳转...
vue路由使用踩坑点：当动态路由再使用路由name去匹配跳转时总是跳转到根路由的问题
闲话少说，直接问题： 之前我的路由时这么写的{path:'/serverInfo/:id',name:'serverInfo',component:()=>import('@/views/serverRequest/SRInfo')} 但是呢，头部做了个通知面板，代码如下：<el-popoverpo...
关于vue单页面应用总是先出现主页一闪而过的现象
问题描述：每次强制刷新登陆页面时，总是会出现主页一闪而过的现象，如果主页上有请求，还会请求后台数据。感觉不太正常，所以想到研究下为什么，然后去掉这个主页一闪而过的现象1、先看下我之前的app的router-view设置<template><el-container:class="['appuf-c...
深入理解VUE样式style层次分析
刚开始使用vue的时候容易被里面的样式搞懵： 样式可以在main.js中引入，在模块js文件中引入，在组件中的style标签引入，在组件中的script标签引入，还可以在index.html的body中引入。 我不禁要问: 1、从不同位置引入的样式到底是什么关系？ 2、在实际定义样式时应该定义在哪个位置，以...
图解vue中 v-for 的 :key 的作用，虚拟dom Diff算法
其实不只是vue，react中在执行列表渲染时也会要求给每个组件添加上key这个属性。 要解释key的作用，不得不先介绍一下虚拟DOM的Diff算法了。 我们知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。...
Vue路由history模式踩坑记录：nginx配置解决404问题
问题背景： vue-router默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash模式的话，那么访问变成http://localhost:8080...
vue-cli项目优化，缩短首屏加载时间
1、大文件定位 我们可以使用webpack可视化插件WebpackBundleAnalyzer查看工程js文件大小，然后有目的的解决过大的js文件。 安装：npminstall--save-devwebpack-bundle-analyzer 在webpack中设置如下，然后npmrundev的时候默认会在888...
nginx配置解决vue单页面打包文件大，首次加载慢的问题
cnpmrunbuild文件过大，其中主要是vender.js有1.5M，代码部署到服务器，首次访问加载页面时比较慢，耗时6.5s左右，所以需要优化下。1、Nginx开启gzip 找到nginx.config。关于gzip压缩代码：http{gzipon;#开启或关闭gziponoffgzip_disable"m...
vue-router 懒加载优化
一、路由懒加载1、先安装babel动态引入插件 npminstall--save-devbabel-plugin-syntax-dynamic-import2、修改router/index.js 异步引入组件importVuefrom'vue';importRouterfrom'vue-router';consti...
VUE性能优化总结
1、v-show，v-if用哪个？ 在我来看要分两个维度去思考问题： 第一个维度是权限问题，只要涉及到权限相关的展示无疑要用 v-if， 这里要说的优化点在于减少页面中dom总数，我比较倾向于使用 item.id 作为key， 假如数组数据是这样的 (item,index...
vue-router登录校验后跳转到之前指定页面如何实现
两个需求：1、用户点击购买需要下单，并跳转到订单页面，但是如果用户没有登录的话，中间有登录验证，会拦截；2、点击购买的时候，登录校验成功了，跳转到订单页面时，订单已创建，去付款即可。3、处理拦截至登录页，然后点去注册页，完善信息页，再回登录页，再登录进去，依然进去目标order页一、解决方案对1： 大概思路：1、...
vue-router路由知识补充
1、render函数varapp=newVue({el:'#app',router,render:h=>h(App)//新添加的函数操作}) 我们新加了render:h=>h(App)一开始我没看懂，直接注释运行看下，结果<divid="app"></div>这个容器里面就啥也没有...
Vue使用中遇到问题汇总（三）
1、后台session过期前端跳转到登录页面 axios拦截器可以拦截请求和返回，对于失效的情况后端可以返回一个状态码，如401，使用axios拦截时判断是401，则跳转到指定页面，如login。本人项目中开发还没定接口规范，后端返回的就是success：true/falseaxios.interceptors.re...
vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
ScopedCSS规范是Web组件产生不污染其他组件，也不被其他组件污染的CSS规范。 vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素，它是通过使用PostCSS来改变以下内容实现的：<stylescoped>.example{color:red;}...
详解vue父组件传递props异步数据到子组件的问题
案例一 父组件parent.vue//asyncData为异步获取的数据，想传递给子组件使用<template><div>父组件<child:child-data="asyncData"></child></div></template><...
