上传压缩文件在页面展示查看

1. 函数调用属于表达式，所以可以用三元表达式来判断调用不同的方法

this.name ? this.emptyFileItme() : this.emptyAllFile();

传入参数不同，页面不刷新的问题解决

因为详情和点击文件夹用的是不同的页面，只是传递的query参数不同，但是query参数变化页面是不会刷新的，于是我也百度了除了一般都有哪些方法

1. beforeRouteUpdate => created => mounted可以监听到路由的变化
2. 给router-view绑定相应的key值

<router-view :key="key" />
 key() {
      return this.$route.fullPath
}

3. 监听路由的变化

    watch: {
        "$route.query.name": {
            handler(to, from) {
                // console.log("当前页面路由：" + to);
                if (to != from) {
                    this.getInitData(to);
                }
            },
            // deep: true, // 深度监听
            // immediate: true, // 第一次初始化渲染就可以监听到
        },
    },

怎么判断是文件还是文件夹

const type = path.lastIndexOf(".");/有可能会有涵盖不到的情况

文件夹在上文件在下

  // 文件夹在前面展示
        data1[key].forEach((element) => {
            element.path.lastIndexOf(".") == 0
                ? arr.unshift(element) //文件夹
                : arr.push(element);
        });

svg图标和html文件用浏览器图标展示

<img
    v-if="
        item.path.endsWith('.html') ||
        item.path.endsWith('.svg')
    "
    src="./浏览器.png"
    alt="" />

将路由中的反斜杠改成正斜杠

这块有点奇怪， console.log(val.path,val,val.path.replace(/\\/g, '/'));val.path在对象中查看是图二中的第二个，但是排到第一个就是图一第一个。

//只有一个反斜杠replace是无效的
const val.path='./file/V3DEMO\V3DEMO\引入评估.html'
  const str1 = val.path.slice(6).split("");
            for (var i = 0; i < str1.length; i++) {
                if (str1[i] == "\\") {
                    str1[i] = "/";
                }
            }
  const str = str1.join("");

踩坑记录参考 blog.csdn.net/anxingshe30…

正常点击html等文件都是会打开新窗口进行展示，但是点击该文件会下载