如何用Vue技术实现简易的仿制Windows Explorer文件管理器功能？

本文共计2788个文字，预计阅读时间需要12分钟。

+ 家里那个角落的小电脑吧，学名叫Windows资源管理器，几乎所有的工作都从这里开始，文件云化是一种趋势。怎样用浏览器实现一个Web版本的Windows资源管理器呢？

​大家一定很熟悉你桌面左上角那个小电脑吧，学名Windows资源管理器，几乎所有的工作都从这里开始，文件云端化是一种趋势。怎样用浏览器实现一个Web版本的Windows资源管理器呢？今天来用Vue好好盘一盘它。

一、导航原理

首先操作和仔细观察导航栏，我们有几个操作途径：

• 点击“向上”按钮回到上一个目录，点击地址栏的文件夹名称返回任意一个目录
• 双击文件夹进入新目录
• 点击“前进”，“后退”按钮操作导航

其中前进，后退操作，可以点击小三角查看一个列表，点击进入文件夹，列表会记录导航历史，哪怕反复进入同一个文件夹，列表仍然会记录下来，如下图：

​

那么我们就能分析并抽象出两个变量：

1. 一个用于存储实际导航的变量（navigationStack）
2. 另一个用于存储导航历史的变量（navigationHistoryStack）

导航堆栈用于存储每一个浏览文件夹的信息，拼接起这些文件夹就形成了当前路径，一组简单的<li>元素通过绑定导航堆栈，就能形成地址栏（web世界里也叫面包屑导航）了。