标签 keep-alive 下的文章

木灵鱼儿 3年前 vue 项目实战

vue keep-alive导致再次进入父路由时不会自动切换到默认的子路由页面

最近写项目遇到一个问题，很头疼，几天了，问了好些大佬，都没有找到问题的解决方案，但是，最后还是被我找到了，可喜可贺...问题有一个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...

6166 0 12

vue keep-alive 路由

vue 使用了keep-alive导致下一个路由页面滚动条位置和当前页面相同

木灵鱼儿 3年前 vue 项目实战

vue 使用了keep-alive导致下一个路由页面滚动条位置和当前页面相同

keep-alive之前也用的比较玄学吧，后来发现，keep-alive只能缓存当前级页面，也就是说：如果keep-alive缓存了A和B这些同级的路由页面或者组件，那是没问题的，但是如果A页面下还有子级路由或者子组件切换，由于嵌套太深，一般是缓存不到的，所以又需要使用一次keep-alive。但是在使用keep-alive的时候遇到一个问题啊，这个问题很烦。虽然keep-alive缓存后，页面的滚动条位置也会相对应的缓存到，但是，正因为这个位置问题，导致A页面如果滚动了，在进入他的子路由页面的时候，子路由页面的滚动条位置会和A页面保持一致，这就很头疼了。找了半天发现一个绝妙的方式：me...

4584 0 2

keep-alive 滚动条位置

vue keep-alive 白名单(include)和黑名单(exclude)

木灵鱼儿 3年前 vue 项目实战

vue keep-alive 白名单(include)和黑名单(exclude)

keep-alive作为vue的缓存标签，有时候也会遇到一些问题，比如，某些页面我们不想缓存，以前的办法基本都是使用一个v-if然后判断路由的meta标签里面属性设置。但现在不一样了，以前的那种方法并不适合现在了，因为keep-alive自带了黑名单和白名单，在白名单中的路由或者组件将会缓存，黑名单中的则不会缓存。例子 <keep-alive include="a,b" exclude="c,d"> <router-view/> </keep-alive>多个组件用英文逗号隔开，单个就写...

5565 0 0

keep-alive 白名单 include

keep-alive 滚动条位置不还原的问题

木灵鱼儿 3年前 vue 项目实战

keep-alive 滚动条位置不还原的问题

我想来想去，可能是布局的问题，或者是过渡动画导致的，元素的scroll无法记住。我尝试给html，body，和最外围的父元素隐藏滚动条，然后只给内容的容器元素设置滚动条，结果切换的时候还是无法记住。实在没辙，只能用点强迫办法了，就是在路由出去之前记住当前容器的滚动条高度，然后进入的时候延迟一点点时间，再恢复，为什么要延迟呢，这个主要是因为动画的问题。在需要记住滚动条高度的路由页面使用路由守卫：//离开之前保存scrollTop beforeRouteLeave(to, from, next) { //保存滚动条元素div的scrollTop值 this.scrollY = ...

3714 0 0

keep-alive 滚动条

标签：keep-alive

vue keep-alive导致再次进入父路由时不会自动切换到默认的子路由页面

vue 使用了keep-alive导致下一个路由页面滚动条位置和当前页面相同

vue keep-alive 白名单(include)和黑名单(exclude)

keep-alive 滚动条位置不还原的问题

最近评论

博客文章RSS订阅

博客评论RSS订阅

登录

标签：keep-alive

vue keep-alive导致再次进入父路由时不会自动切换到默认的子路由页面

vue 使用了keep-alive导致下一个路由页面滚动条位置和当前页面相同

vue keep-alive 白名单(include)和黑名单(exclude)

keep-alive 滚动条位置不还原的问题

最近评论

博客文章RSS订阅

博客评论RSS订阅