基于vue.js 编写的简单的文件管理器的demo

很简单的一个项目demo
因为个人比较菜，踩了很多坑才得以解决
写出来供大家一起参考，欢迎大家指出
本次项目使用的是Vue和elementUI来进行制作的
想做出简单的文件管理器的效果
比如路由切换，文件增删改以及文件夹的打开和返回

先给出项目的主体结构

main.js:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//import App from './App'
//import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import Navi from './components/navigation/Navi.vue'

import router from './router/index'

Vue.use(ElementUI);

Vue.config.productionTip = false

/* eslint-disable no-new */
// new Vue({
   
//   el: '#app',
//   router,
//   components: { App },
//   template: '<App/>'
// })

new Vue({
   
  el: '#app',
  router,
  render: h => h(Navi)
})

main.js里设置了：

render: h => h(Navi)

指的是项目打开后渲染的是Navi这个文件
即打开就是Navi这个文件的界面
这是一个箭头函数，详细的可以直接复制百度了解
那么Navi就是我们的主界面
Navi.vue上代码：

<template>
    <div style="background-color: #EBEBEB;min-height:800px">
        <div style="width:100%;background-color: #636363; overflow: hidden">
            <span class="demonstration" style="float:left;padding-top:10px;color:white;margin-left:1%">
                网站首页
            </span>
            <span class="demonstration" style="float:left;padding:5px;color:white;margin-left:2%;width:15%">
                <el-input
                    placeholder="请输入"
                    icon="search"
                    v-model="searchCriteria"
                    :on-icon-click="handleIconClick">
                </el-input>
            </span>
            <span class="demonstration" style="float:right;padding-top:10px;margin-right:1%">
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link" style="color:white">
                    admin<i class="el-icon-caret-bottom el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人信息</el-dropdown-item>
                    <el-dropdown-item>退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
            </span>
        </div>

        <div style="margin-top:5px">
            <el-row :gutter="10">
                <el-col :xs="4" :sm="4" :md="4" :lg="4">
                    <div>
                        <el-menu default-active