虚拟任务栈技术 - 让你的网页具备原生APP的页面切换体验

所以我们的实现思路，需要围绕着要做的这两件事情来去做。

首先：需要监听到路由的跳转（页面的跳转）

监听路由的跳转，VueRouter 为我们提供了现成的解决方案，我们可以直接通过 watch 属性来监听 $router 的跳转变化：

// 代码来自 VueRouter 官网：https://router.vuejs.org/zh/guide/advanced/transitions.html

// watch $route 决定使用哪种过渡

watch: {

‘$route’ (to, from) {

const toDepth = to.path.split(‘/’).length

const fromDepth = from.path.split(‘/’).length

this.transitionName = toDepth < fromDepth ? ‘slide-right’ : ‘slide-left’

}

}

其次：需要保存已经进入栈中的页面，而不是销毁他们

这一步要做的事情，我们需要分割为两步来去看：

1、首先我们得需要一个栈

2、其次我们把页面保存到栈中

那么怎么构建一个栈呢？

栈的特性是什么？

关于栈的特性，我们可以从 操作 和 规则 两个方面来看：

1、操作上：

在操作上，栈主要有两个操作：一个是进栈（PUSH），另一个是出栈（POP）

2、规则上：

在规则上，栈遵循 <先进后出> 的原则

基于以上的特性，我们可以通过一个 数组 来表述一个栈，因为数组同样具备 push 与 pop 的操作，同样数据中元素的进出在push与pop时，也遵循了 <先进后出> 的原则

把页面保存到栈中

有了栈，下面我们需要做的就是把页面保存到栈中，把页面保存到栈中，我们就必须要借助 Vue 中提供的 KeepAlive 组件。

先明确一下，KeepAlive 的作用：

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们

并且我们必须要知道，对于 KeepAlive 来说，它提供了一个关键的 Props：

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。

以上功能点，就是我们 把页面保存到栈中 的关键。

我们只需要把需要缓存的页面名称（其实就是 组件名称），通过 include 放入到 keep-alive 组件中，那么我们就可以完成页面的缓存了。

虚拟任务栈在实际应用中的实现

---

明确了思路之后，我们来看实现。对于实际的实现，我们需要借助 Vue 的实际操作来去做。

我们知道当我们需要在 Vue 中跳转页面时，我们实际上是在进行路由的跳转，而路由的跳转对应的是组件的切换。

所以要实现“虚拟任务栈”，我们需要从以下两个地方着手：

1、在根组件（APP.vue） 中监听路由的跳转，实现动画（进入、退出）以及完成页面的进栈和出栈。

2、在页面跳转的编程式导航中，我们需要告诉根组件，当前的跳转是在进入还是在退出。

达到以上两步，我们就可以实现 “虚拟任务栈” 的功能。

那么我们下面来看，我们应该怎么做（代码直接截取《混合开发 仿京东项目App》 中的代码实现）：

首先：在根组件（APP.vue） 中监听路由的跳转

监听路由跳转，我们需要处理三种情况：

1、页面的进入

2、页面的退出

3、页面跳转到 tabBar 的页面中（清空虚拟任务栈）

以下是具体代码实现：

// App.vue

其次：在页面跳转时

在页面跳转时，同样对应三种情况：

1、进入新的页面，通知虚拟任务栈，当前页面需要被保存到栈中

2、退出页面，通知虚拟任务栈，当前的页面需要从栈中弹出

3、进入 tabbar 中的页面，通知虚拟任务栈，执行清空操作

以下是第一种情况：进入新的页面，通知虚拟任务栈，当前页面需要被保存到栈中

// 1、进入新的页面，当前页面需要被保存到栈中

onGoodsItemClick: function(item) {

…

// 编程式导航实现页面的跳转，

this.$router.push({

// 进入页面的路由名称

name: ‘goodsDetails’,

params: {

// 进入页面的标记

routerType: ‘push’

},

// 把传递的数据附加到我们的 URL 上

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。