2021-11-06 学习记录--Vue-实现页面之间切换后，不会改变原来的浏览位置，不会跳回到页面最顶部

一、实现从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学习视频的 学习笔记~