传统的vue组件切换，无非是Vue.component定义一个组件，然后设置一个名字，再通过component自定义html元素加上is属性去动态切换组件。vue-cli的话，在components里面将import的组件激活，然后也是is属性配合component自定义html元素进行切换。那么异步组件的优点在哪里呢？无非是组件会作为一个单独的js文件存在，需要时才被调用，这个特性再开发单页的时候最明显，他是会在打包后将异步组件单独生成一个js文件，在调用时下载并使用。如何创建一个异步组件Vue.component创建异步组件这个方法适合script引入vue.js的那种方式，估计也用...
一直想找一个动效，因为以前一直都是使用mode="out-in"；这种一般也就fade这种动效好看，如果要更好看一点，就需要花点心思了。效果原理通过给每个路由的自定义属性meta设置一个层级，第一层，第二层，第三层，也可以理解为第一页，第二页，第三页。然后通过这个层级关系判断页面是往左还是往右。源码[hide]vue<template> <div id="app"> <transition :name="transitionName"> <keep-alive&g...
这个问题一般是出现在在路由鉴权的功能上。我们在路由守卫里面判断，当用户已经登录了，点击进入访客页，那么在进入之前我们next({name:"Home"})跳转到首页。然后就会报错：Error: Redirected from X to Y via a navigation guard.百度和谷歌找了好久，很多人都说是代码里面重定向过多，拜托，这种应该是键盘侠，如果真的过多，早就解决问题，还问个鸡腿。首先这个问题大部分都是出现在vue-router v3.1及以上的版本我觉得可能是插件的问题，因为出现这个问题的提问时间基本都是这两个月内出现的。唯一的解决办法就是降级，将...
按照官方的教程，在main文件中引入自定义的less文件，在这个前提下，我们需要less语言解析yarn add less less-loader --dev安装完我们main引入自定义的less文件，结果启动的时候出现错误：Inline JavaScript is not enabled .bezierEasingMixin();这个错误一般是因为新版本less带来的，你可以换旧版，比如5.0的版本我们在项目根目录找到vue.config.js文件，没有你就创建这个文件填入以下：module.exports = { css: { loaderOptions: {...
最近写项目遇到一个问题，很头疼，几天了，问了好些大佬，都没有找到问题的解决方案，但是，最后还是被我找到了，可喜可贺...问题有一个home页，home页里面有router-link元素进行子路由切换，为了减少资源损耗，所以直接使用了keep-alive进行路由页缓存，假设有三个子路由abc，a路由页面有两个子路由a-1和a-2，默认是a-1显示。当我们进入到a路由是，默认显示a-1，然后我们切换到a-2，然后路由push返回到home页，再次进入到a页面时，你会发现，a路由此时显示的a-2而不是a-1，但浏览器地址是a-1的地址，此时，我们可能没办法切换到a-1了。问题图为什么主要因为k...
keep-alive之前也用的比较玄学吧，后来发现，keep-alive只能缓存当前级页面，也就是说：如果keep-alive缓存了A和B这些同级的路由页面或者组件，那是没问题的，但是如果A页面下还有子级路由或者子组件切换，由于嵌套太深，一般是缓存不到的，所以又需要使用一次keep-alive。但是在使用keep-alive的时候遇到一个问题啊，这个问题很烦。虽然keep-alive缓存后，页面的滚动条位置也会相对应的缓存到，但是，正因为这个位置问题，导致A页面如果滚动了，在进入他的子路由页面的时候，子路由页面的滚动条位置会和A页面保持一致，这就很头疼了。找了半天发现一个绝妙的方式：me...
安装npm install --save-dev webpack-bundle-analyzer配置webpack.base.conf.js没有这个文件就手动创建，和package.json文件同级别module.exports = vuxLoader.merge(webpackConfig, { plugins: [ new BundleAnalyzerPlugin({ analyzerMode: "server", analyzerHost: "127.0.0.1", analyzerPort: ...
keep-alive作为vue的缓存标签，有时候也会遇到一些问题，比如，某些页面我们不想缓存，以前的办法基本都是使用一个v-if然后判断路由的meta标签里面属性设置。但现在不一样了，以前的那种方法并不适合现在了，因为keep-alive自带了黑名单和白名单，在白名单中的路由或者组件将会缓存，黑名单中的则不会缓存。例子 <keep-alive include="a,b" exclude="c,d"> <router-view/> </keep-alive>多个组件用英文逗号隔开，单个就写...
用Layout的时候，我设置的是一行三个元素显示，但是有时候，遍历的对象可能无法满足一行三个显示，结果发现col元素会把拉伸一部分宽度。这就很尴尬了，我在使用其他框架的这种布局的时候都没遇到这种情况，没办法，只能用死办法，我给你补上几个空col了那么，如何计算需要补充几个呢？假设我们要遍历的数组名为：oneArr创建一个计算属性：fillArr() { const remainder = Math.ceil(this.indusArr.length % 3); if (remainder !== 0) { return 3 - remainder;...
以前的我，很喜欢用vuex来做一个元素的开关存储，因为简单粗暴，我不用考虑组件之间要怎么才能传参，怎么去更新，只需要设置一个变量，getters获取，mutations设置一下，一个开关变量就做好了。但是随着东西越来越多，我发现，vuex重复书写的代码非常多，我觉得这应该是以后vuex优化的一大方向，所以，我有点不太想用vuex来存储所有组件的开关状态了。于是我想到了props，父组件向子组件传参的方式传替布尔值开关。再利用sync修饰符，通过预设的更新方法更新内容。父组件<Child :switch.sync="open"> <script>...
在使用了amfe-flexible自动px转rem的插件后。遇到过这个问题，发现无解啊，只要在组件的style里面书写大写的Px单位，vetur都会给你自动转成小写，很尴尬，特别是在用scss的情况下，组件内通过大小单位来让元素大小不自动转rem，无法完成，除非你关闭自动格式化，但是那是不可能的，太难了。有种鱼和熊掌不可兼得的感觉。但是作为一个成年人，怎么可能要做选择，我都要...这个办法也是我灵光一现，突然有的，我说下我的思路。[hide]首先自动转换时因为插件的功能，针对.vue格式的文件，所以在vue文件里面怎么弄，都很难达到理想的需求。那么，如果我们在其他文件里面呢？宾狗！！！是...
vue使用better-scroll制作左右菜单联动better-scroll是一个纯js的插件，官方推荐配合vue这种纯前端开发使用，在vue中使用需要注意一些地方，比如初始化的时机，html的布局，事件的触发机制安装我现在都是用yarn 方便一些，未来的安装包管理器yarn add better-scrollyarn不写--save默认就是save，如果要--save-dev 如下写法yarn add better-scroll --dev安装完毕后可以在main.js文件中作为全局调用，也可以在对于的组件内调用，我是在组件中的，所以在组件的script元素中import<sc...
之前我的用法就是，哪个组件需要引入这个变量就import引入，现在感觉有点麻烦，就想能不能做一个全局的，所有组件都可以直接引入这个scss文件中的内容。首先我们需要安装一个插件：style-resources-loadervue add style-resources-loader回车后会有提示四个选项，我们scss就选择scss然后回车。安装完毕后在项目根目录创建一个vue的配置文件，有就不用创建，直接用。创建vue.config.js文件，将下面的代码丢进去，自己改下路径地址：const path = require("path"); module.exports...
听说yarn很好用，所以这次初始化项目的时候使用的就是yarn，在安装完yarn后，再用vue create会自动调用yarn进行初始化，应该是吧，我初始化的时候显示用的yarn。但是安装node-sass的时候会报错，原因可能是因为网络问题，所以需要给yarn更换为国内的源：yarn config set registry https://registry.npm.taobao.org -gyarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g两段命令都提示success就ok了，再重新安...
只要还是vue的版本太高了。需要安装稍微低一点的版本才可以有水波纹动效，这个方法也是百度找到的，非常有用。原方法出处: 修改Vue.js版本，以修复MuseUI没有水波纹效果的BUG首先卸载vue：npm uninstall vue npm uninstall vue-template-compiler 安装指定版本npm install vue@2.6.8 -save npm install vue-template-compiler@2.6.8 -save-dev 重启，完事。最后发现新版路由也不能很好的支持，要换旧版的，我使用的是2.6.0.npm uninstall vue-...
我想来想去，可能是布局的问题，或者是过渡动画导致的，元素的scroll无法记住。我尝试给html，body，和最外围的父元素隐藏滚动条，然后只给内容的容器元素设置滚动条，结果切换的时候还是无法记住。实在没辙，只能用点强迫办法了，就是在路由出去之前记住当前容器的滚动条高度，然后进入的时候延迟一点点时间，再恢复，为什么要延迟呢，这个主要是因为动画的问题。在需要记住滚动条高度的路由页面使用路由守卫：//离开之前保存scrollTop beforeRouteLeave(to, from, next) { //保存滚动条元素div的scrollTop值 this.scrollY = ...
一般情况下，keep-alive会对组件进行缓存，然后下次进入的时候使用的是缓存，从而节省性能，但是也会有一定的问题，就是如果你的路由页面有分子路由，用户此时进入到了子路由b，而我们默认路由时a。这就导致当我们利用路由跳转的时候，即便跳的是子路由a，但是因为缓存的问题，导致进入的是b，因为b被缓存了。解决办法：利用meta标签来判断，是否需要缓存，这就需要在每个路由配置上设置一个属性：export default[ { path:'/', name:'home', components:Home, meta:{ keepA...
路由守卫一般用于判断用户是否登录，如果已登录，则进入页面，如果没有登录，则跳转到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...
最近评论