一、实现从A页面切换到B页面,再次切换到A页面时,不会自动跳转到A页面的最顶部,而是停留在A页面原来的浏览位置
造成原因:Vue
自带一个属性:destroyed
(销毁)
解决方法:用<keep-alive></keep-alive>
进行包裹
如下图中最下面所示:有四个可切换的页面:首页(Home.vue
)、分类(Category.vue
)、购物车(ShopCart.vue
)、我的(Profile.vue
)
第一步、分析造成原因
假如在首页(Home.vue
)页面里写入代码:
// 销毁-当从首页切换到其它页面时,就会触发这个事件
destroyed() {
console.log('home destroyed');
},
结果如下:
当我们从首页(Home.vue
)页面切换到其它三个页面中的任意一个页面时,就会打印home destroyed
这样的话,就会造成我们标题里所说的问题:
多个页面切换时,会自动跳转到最顶部,而不是停留在原来浏览位置
第二步、解决方法
那么,解决方法:
通过keep-alive
,在App.vue
中将对应页面内容包起来即可。
【因为这是将对应页面的展示内容封装在这儿滴,这里根据实际需求进行修哈哟,只要把首页的展示内容用<keep-alive></keep-alive>
包裹起来就好啦】
上代码:
第三步、最终结果
最终结果:
切换到分类(Category.vue
)页面:👇
再次切换到首页(Home.vue
)页面: 👇👇
哒哒哒~搞定🤭
二、补充情况
补充情况:
当我们遇到以下情况时,却出现一个bug
:当我们点击其中任何一张图片,跳转到的详情页里的图片展示的都是 相同 滴:
Because
这里是根据不同图片的对应id
不同,跳转到不同的对应详情页
So
这里需要将 对应详情页(Detail.vue)
排除在外,即这个页面(Detail.vue)
不能用<keep-alive></keep-alive>
包裹起来,那该如何操作呢?
上代码:【在<keep-alive></keep-alive>
里加上下面这句代码就好啦~】
bingo~☺️
These are bilibili-coderwhy老师Vue学习视频的 学习笔记~