From 1ae31fdd45f7564bb75f3c4f5ccf93d32f81de04 Mon Sep 17 00:00:00 2001
From: Pan <panfree23@gmail.com>
Date: Tue, 31 Oct 2017 10:49:24 +0800
Subject: [PATCH] refactor:add keep-alive && component add name

---
 src/router/index.js                           | 54 ++++++++++++-------
 src/store/getters.js                          |  1 +
 src/store/modules/app.js                      | 22 ++++++--
 src/views/charts/keyboard.vue                 |  7 +--
 src/views/charts/keyboard2.vue                |  7 +--
 src/views/charts/line.vue                     |  7 +--
 src/views/charts/mixChart.vue                 |  7 +--
 src/views/clipboard/index.vue                 |  1 +
 src/views/{errlog => errorLog}/errcode.vue    |  0
 src/views/{errlog => errorLog}/index.vue      |  1 +
 src/views/errorPage/401.vue                   |  1 +
 src/views/errorPage/404.vue                   |  1 +
 src/views/example/tab/index.vue               |  2 +-
 .../table/{table.vue => complexTable.vue}     |  2 +-
 src/views/example/table/dragTable.vue         |  2 +-
 .../example/table/dynamicTable/index.vue      |  1 +
 src/views/example/table/index.vue             | 19 +++++--
 src/views/example/table/inlineEditTable.vue   |  2 +-
 .../excel/{index.vue => exportExcel.vue}      |  1 +
 src/views/excel/selectExcel.vue               |  1 +
 src/views/excel/uploadExcel.vue               |  7 +--
 .../components/ArticleDetail.vue}             | 22 +++-----
 src/views/form/create.vue                     | 13 +++++
 src/views/form/edit.vue                       | 13 +++++
 src/views/layout/components/AppMain.vue       | 12 ++++-
 src/views/layout/components/TabsView.vue      |  2 +-
 src/views/theme/index.vue                     |  1 +
 src/views/zip/index.vue                       |  1 +
 28 files changed, 147 insertions(+), 63 deletions(-)
 rename src/views/{errlog => errorLog}/errcode.vue (100%)
 rename src/views/{errlog => errorLog}/index.vue (97%)
 rename src/views/example/table/{table.vue => complexTable.vue} (99%)
 rename src/views/excel/{index.vue => exportExcel.vue} (99%)
 rename src/views/{example/form.vue => form/components/ArticleDetail.vue} (96%)
 create mode 100644 src/views/form/create.vue
 create mode 100644 src/views/form/edit.vue

diff --git a/src/router/index.js b/src/router/index.js
index f16027cc..5c4b5728 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,11 +9,14 @@ Vue.use(Router)
 import Layout from '../views/layout/Layout'
 
 /**
-* icon : the icon show in the sidebar
-* hidden : if `hidden:true` will not show in the sidebar
-* title : the name show in submenu and levelbar
-* redirect : if `redirect:noredirect` will no redirct in the levelbar
-* meta : { role: ['admin'] }  will control the page role
+* hidden: true          if `hidden:true` will not show in the sidebar(default is false)
+* redirect: noredirect  if `redirect:noredirect` will no redirct in the levelbar
+* meta : {
+    role: ['admin']     will control the page role
+    title: 'title'      the name show in submenu and levelbar
+    icon: 'svg-name'    the icon show in the sidebar,
+    noCache: true    if fasle ,the page will no be cached(default is false)
+  }
 **/
 
 export const constantRouterMap = [
@@ -119,9 +122,9 @@ export const asyncRouterMap = [
     },
     children: [
       { path: 'index', component: _import('charts/index'), name: 'chartsIndex', meta: { title: '介绍' }},
-      { path: 'keyboard', component: _import('charts/keyboard'), name: 'keyboard', meta: { title: '键盘图表' }},
-      { path: 'keyboard2', component: _import('charts/keyboard2'), name: 'keyboard2', meta: { title: '键盘图表2' }},
-      { path: 'line', component: _import('charts/line'), name: 'line', meta: { title: '折线图' }},
+      { path: 'keyboard', component: _import('charts/keyboard'), name: 'keyboardChart', meta: { title: '键盘图表' }},
+      { path: 'keyboard2', component: _import('charts/keyboard2'), name: 'keyboardChart2', meta: { title: '键盘图表2' }},
+      { path: 'line', component: _import('charts/line'), name: 'lineChart', meta: { title: '折线图' }},
       { path: 'mixchart', component: _import('charts/mixChart'), name: 'mixChart', meta: { title: '混合图表' }}
     ]
   },
@@ -149,12 +152,25 @@ export const asyncRouterMap = [
           { path: 'dynamic-table', component: _import('example/table/dynamicTable/index'), name: 'dynamicTable', meta: { title: '动态table' }},
           { path: 'drag-table', component: _import('example/table/dragTable'), name: 'dragTable', meta: { title: '拖拽table' }},
           { path: 'inline-edit-table', component: _import('example/table/inlineEditTable'), name: 'inlineEditTable', meta: { title: 'table内编辑' }},
-          { path: 'table', component: _import('example/table/table'), name: 'tableDemo', meta: { title: '综合table' }}
+          { path: 'complex-table', component: _import('example/table/complexTable'), name: 'complexTable', meta: { title: '综合table' }}
         ]
       },
-      { path: 'tab/index', icon: 'tab', component: _import('example/tab/index'), name: 'tab', meta: { title: 'Tab' }},
-      { path: 'form/edit', icon: 'form', component: _import('example/form'), name: 'formEdit', meta: { title: '编辑Form', isEdit: true }},
-      { path: 'form/create', icon: 'form', component: _import('example/form'), name: 'FormCreate', meta: { title: '创建Form' }}
+      { path: 'tab/index', icon: 'tab', component: _import('example/tab/index'), name: 'tab', meta: { title: 'Tab' }}
+    ]
+  },
+
+  {
+    path: '/form',
+    component: Layout,
+    redirect: 'noredirect',
+    name: 'form',
+    meta: {
+      title: '表单',
+      icon: 'form'
+    },
+    children: [
+      { path: 'create-form', component: _import('form/create'), name: 'createForm', meta: { title: '创建表单', icon: 'table' }},
+      { path: 'edit-form', component: _import('form/edit'), name: 'editForm', meta: { title: '编辑表单', icon: 'table' }}
     ]
   },
 
@@ -168,8 +184,8 @@ export const asyncRouterMap = [
       icon: '404'
     },
     children: [
-      { path: '401', component: _import('errorPage/401'), name: '401', meta: { title: '401' }},
-      { path: '404', component: _import('errorPage/404'), name: '404', meta: { title: '404' }}
+      { path: '401', component: _import('errorPage/401'), name: 'page401', meta: { title: '401', noCache: true }},
+      { path: '404', component: _import('errorPage/404'), name: 'page404', meta: { title: '404', noCache: true }}
     ]
   },
 
@@ -177,7 +193,7 @@ export const asyncRouterMap = [
     path: '/error-log',
     component: Layout,
     redirect: 'noredirect',
-    children: [{ path: 'log', component: _import('errlog/index'), name: 'errorLog', meta: { title: '错误日志', icon: 'bug' }}]
+    children: [{ path: 'log', component: _import('errorLog/index'), name: 'errorLog', meta: { title: '错误日志', icon: 'bug' }}]
   },
 
   {
@@ -190,9 +206,9 @@ export const asyncRouterMap = [
       icon: 'excel'
     },
     children: [
-      { path: 'export-excel', component: _import('excel/index'), name: 'exportExcel', meta: { title: 'export excel' }},
-      { path: 'export-selected-excel', component: _import('excel/selectExcel'), name: 'selectExcel', meta: { title: 'export selected' }},
-      { path: 'upload-excel', component: _import('excel/uploadExcel'), name: 'uploadExcel', meta: { title: 'upload excel' }}
+      { path: 'export-excel', component: _import('excel/exportExcel'), name: 'exportExcel', meta: { title: 'export excel', noCache: true }},
+      { path: 'export-selected-excel', component: _import('excel/selectExcel'), name: 'selectExcel', meta: { title: 'export selected', noCache: true }},
+      { path: 'upload-excel', component: _import('excel/uploadExcel'), name: 'uploadExcel', meta: { title: 'upload excel', noCache: true }}
     ]
   },
 
@@ -214,7 +230,7 @@ export const asyncRouterMap = [
     path: '/clipboard',
     component: Layout,
     redirect: 'noredirect',
-    children: [{ path: 'index', component: _import('clipboard/index'), name: 'clipboard', meta: { title: 'clipboard', icon: 'clipboard' }}]
+    children: [{ path: 'index', component: _import('clipboard/index'), name: 'clipboardDemo', meta: { title: 'clipboard', icon: 'clipboard' }}]
   },
 
   { path: '*', redirect: '/404', hidden: true }
diff --git a/src/store/getters.js b/src/store/getters.js
index 6d4c72d0..07183a43 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -1,6 +1,7 @@
 const getters = {
   sidebar: state => state.app.sidebar,
   visitedViews: state => state.app.visitedViews,
+  cachedViews: state => state.app.cachedViews,
   token: state => state.user.token,
   avatar: state => state.user.avatar,
   name: state => state.user.name,
diff --git a/src/store/modules/app.js b/src/store/modules/app.js
index 95cdf5f1..bed8098f 100644
--- a/src/store/modules/app.js
+++ b/src/store/modules/app.js
@@ -5,7 +5,8 @@ const app = {
     sidebar: {
       opened: !+Cookies.get('sidebarStatus')
     },
-    visitedViews: []
+    visitedViews: [],
+    cachedViews: []
   },
   mutations: {
     TOGGLE_SIDEBAR: state => {
@@ -18,17 +19,28 @@ const app = {
     },
     ADD_VISITED_VIEWS: (state, view) => {
       if (state.visitedViews.some(v => v.path === view.path)) return
-      state.visitedViews.push({ name: view.name, path: view.path })
+      state.visitedViews.push({
+        name: view.name,
+        path: view.path
+      })
+      if (!view.meta.noCache) {
+        state.cachedViews.push(view.name)
+      }
     },
     DEL_VISITED_VIEWS: (state, view) => {
-      let index
       for (const [i, v] of state.visitedViews.entries()) {
         if (v.path === view.path) {
-          index = i
+          state.visitedViews.splice(i, 1)
+          break
+        }
+      }
+      for (const i of state.cachedViews) {
+        if (i === view.name) {
+          const index = state.cachedViews.indexOf(i)
+          state.cachedViews.splice(index, 1)
           break
         }
       }
-      state.visitedViews.splice(index, 1)
     }
   },
   actions: {
diff --git a/src/views/charts/keyboard.vue b/src/views/charts/keyboard.vue
index bfc4db82..4001811e 100644
--- a/src/views/charts/keyboard.vue
+++ b/src/views/charts/keyboard.vue
@@ -1,16 +1,17 @@
 <template>
   <div class="components-container" style='height:100vh'>
     <div class='chart-container'>
-      <keyboard-chart height='100%' width='100%'></keyboard-chart>
+      <chart height='100%' width='100%'></chart>
     </div>
   </div>
 </template>
 
 <script>
-import keyboardChart from '@/components/Charts/keyboard'
+import Chart from '@/components/Charts/keyboard'
 
 export default {
-  components: { keyboardChart }
+  name: 'keyboardChart',
+  components: { Chart }
 }
 </script>
 
diff --git a/src/views/charts/keyboard2.vue b/src/views/charts/keyboard2.vue
index b7b53c20..9c797b6b 100644
--- a/src/views/charts/keyboard2.vue
+++ b/src/views/charts/keyboard2.vue
@@ -1,16 +1,17 @@
 <template>
   <div class="components-container" style='height:100vh'>
     <div class='chart-container'>
-      <keyboard-chart2 height='100%' width='100%'></keyboard-chart2>
+      <chart height='100%' width='100%'></chart>
     </div>
   </div>
 </template>
 
 <script>
-import keyboardChart2 from '@/components/Charts/keyboard2'
+import Chart from '@/components/Charts/keyboard2'
 
 export default {
-  components: { keyboardChart2 }
+  name: 'keyboardChart2',
+  components: { Chart }
 }
 </script>
 
diff --git a/src/views/charts/line.vue b/src/views/charts/line.vue
index 63b73a39..6d62e52f 100644
--- a/src/views/charts/line.vue
+++ b/src/views/charts/line.vue
@@ -1,16 +1,17 @@
 <template>
   <div class="components-container" style='height:100vh'>
     <div class='chart-container'>
-      <line-marker height='100%' width='100%'></line-marker>
+      <chart height='100%' width='100%'></chart>
     </div>
   </div>
 </template>
 
 <script>
-import lineMarker from '@/components/Charts/lineMarker'
+import Chart from '@/components/Charts/lineMarker'
 
 export default {
-  components: { lineMarker }
+  name: 'lineChart',
+  components: { Chart }
 }
 </script>
 
diff --git a/src/views/charts/mixChart.vue b/src/views/charts/mixChart.vue
index 647c1ec6..387e2e18 100644
--- a/src/views/charts/mixChart.vue
+++ b/src/views/charts/mixChart.vue
@@ -1,16 +1,17 @@
 <template>
   <div class="components-container" style='height:100vh'>
     <div class='chart-container'>
-      <mix-chart height='100%' width='100%'></mix-chart>
+      <chart height='100%' width='100%'></chart>
     </div>
   </div>
 </template>
 
 <script>
-import mixChart from '@/components/Charts/mixChart'
+import Chart from '@/components/Charts/mixChart'
 
 export default {
-  components: { mixChart }
+  name: 'mixChart',
+  components: { Chart }
 }
 </script>
 
diff --git a/src/views/clipboard/index.vue b/src/views/clipboard/index.vue
index b0281abc..b52ea1be 100644
--- a/src/views/clipboard/index.vue
+++ b/src/views/clipboard/index.vue
@@ -18,6 +18,7 @@ import clip from '@/utils/clipboard' // use clipboard directly
 import clipboard from '@/directive/clipboard/index.js'  // use clipboard by v-directive
 
 export default {
+  name: 'clipboardDemo',
   directives: {
     clipboard
   },
diff --git a/src/views/errlog/errcode.vue b/src/views/errorLog/errcode.vue
similarity index 100%
rename from src/views/errlog/errcode.vue
rename to src/views/errorLog/errcode.vue
diff --git a/src/views/errlog/index.vue b/src/views/errorLog/index.vue
similarity index 97%
rename from src/views/errlog/index.vue
rename to src/views/errorLog/index.vue
index f906e9a0..8703bf0a 100644
--- a/src/views/errlog/index.vue
+++ b/src/views/errorLog/index.vue
@@ -14,6 +14,7 @@
 import errCode from './errcode'
 
 export default {
+  name: 'errorLog',
   components: { errCode }
 }
 </script>
diff --git a/src/views/errorPage/401.vue b/src/views/errorPage/401.vue
index 888e9df6..4f73b04e 100644
--- a/src/views/errorPage/401.vue
+++ b/src/views/errorPage/401.vue
@@ -30,6 +30,7 @@
 import errGif from '@/assets/401_images/401.gif'
 
 export default {
+  name: 'page401',
   data() {
     return {
       errGif: errGif + '?' + +new Date(),
diff --git a/src/views/errorPage/404.vue b/src/views/errorPage/404.vue
index a8ab241d..391ef329 100644
--- a/src/views/errorPage/404.vue
+++ b/src/views/errorPage/404.vue
@@ -23,6 +23,7 @@ import img_404 from '@/assets/404_images/404.png'
 import img_404_cloud from '@/assets/404_images/404_cloud.png'
 
 export default {
+  name: 'page404',
   data() {
     return {
       img_404,
diff --git a/src/views/example/tab/index.vue b/src/views/example/tab/index.vue
index 4b69d7c8..5bebb96b 100644
--- a/src/views/example/tab/index.vue
+++ b/src/views/example/tab/index.vue
@@ -15,7 +15,7 @@
 import tabPane from './components/tabPane'
 
 export default {
-  name: 'tabDemo',
+  name: 'tab',
   components: { tabPane },
   data() {
     return {
diff --git a/src/views/example/table/table.vue b/src/views/example/table/complexTable.vue
similarity index 99%
rename from src/views/example/table/table.vue
rename to src/views/example/table/complexTable.vue
index 496bfefd..dc4cfde9 100644
--- a/src/views/example/table/table.vue
+++ b/src/views/example/table/complexTable.vue
@@ -168,7 +168,7 @@ const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
 }, {})
 
 export default {
-  name: 'table_demo',
+  name: 'complexTable',
   directives: {
     waves
   },
diff --git a/src/views/example/table/dragTable.vue b/src/views/example/table/dragTable.vue
index e1bc0da9..63e0fd41 100644
--- a/src/views/example/table/dragTable.vue
+++ b/src/views/example/table/dragTable.vue
@@ -64,7 +64,7 @@ import { fetchList } from '@/api/article'
 import Sortable from 'sortablejs'
 
 export default {
-  name: 'drag-table_demo',
+  name: 'dragTable',
   data() {
     return {
       list: null,
diff --git a/src/views/example/table/dynamicTable/index.vue b/src/views/example/table/dynamicTable/index.vue
index 6182f0e7..503c0b08 100644
--- a/src/views/example/table/dynamicTable/index.vue
+++ b/src/views/example/table/dynamicTable/index.vue
@@ -13,6 +13,7 @@ import fixedThead from './fixedThead'
 import unfixedThead from './unfixedThead'
 
 export default {
+  name: 'dynamicTable',
   components: { fixedThead, unfixedThead }
 }
 </script>
diff --git a/src/views/example/table/index.vue b/src/views/example/table/index.vue
index 8507f2b8..b6403e86 100644
--- a/src/views/example/table/index.vue
+++ b/src/views/example/table/index.vue
@@ -1,5 +1,18 @@
 <template>
-  <keep-alive>
-    <router-view></router-view>
-  </keep-alive>
+  <transition name="fade" mode="out-in">
+    <keep-alive :include='cachedViews'>
+      <router-view></router-view>
+    </keep-alive>
+  </transition>
 </template>
+
+<script>
+export default {
+  name: 'TableMain',
+  computed: {
+    cachedViews() {
+      return this.$store.state.app.cachedViews
+    }
+  }
+}
+</script>
diff --git a/src/views/example/table/inlineEditTable.vue b/src/views/example/table/inlineEditTable.vue
index d8f0c40d..9dd245b3 100644
--- a/src/views/example/table/inlineEditTable.vue
+++ b/src/views/example/table/inlineEditTable.vue
@@ -54,7 +54,7 @@
 import { fetchList } from '@/api/article'
 
 export default {
-  name: 'inline_edit-table_demo',
+  name: 'inlineEditTable',
   data() {
     return {
       list: null,
diff --git a/src/views/excel/index.vue b/src/views/excel/exportExcel.vue
similarity index 99%
rename from src/views/excel/index.vue
rename to src/views/excel/exportExcel.vue
index f46fdae7..f1bb62ad 100644
--- a/src/views/excel/index.vue
+++ b/src/views/excel/exportExcel.vue
@@ -37,6 +37,7 @@ import { fetchList } from '@/api/article'
 import { parseTime } from 'utils'
 
 export default {
+  name: 'exportExcel',
   data() {
     return {
       list: null,
diff --git a/src/views/excel/selectExcel.vue b/src/views/excel/selectExcel.vue
index 61a67d03..0bb33380 100644
--- a/src/views/excel/selectExcel.vue
+++ b/src/views/excel/selectExcel.vue
@@ -38,6 +38,7 @@
 import { fetchList } from '@/api/article'
 
 export default {
+  name: 'selectExcel',
   data() {
     return {
       list: null,
diff --git a/src/views/excel/uploadExcel.vue b/src/views/excel/uploadExcel.vue
index 731ea265..44eb87c6 100644
--- a/src/views/excel/uploadExcel.vue
+++ b/src/views/excel/uploadExcel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="app-container">
-    <upload-excel @on-selected-file='selected'></upload-excel>
+    <upload-excel-component @on-selected-file='selected'></upload-excel-component>
     <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
       <el-table-column v-for='item of tableHeader' :prop="item" :label="item" :key='item'>
       </el-table-column>
@@ -9,10 +9,11 @@
 </template>
 
 <script>
-import uploadExcel from 'components/UploadExcel/index.vue'
+import UploadExcelComponent from 'components/UploadExcel/index.vue'
 
 export default {
-  components: { uploadExcel },
+  name: 'uploadExcel',
+  components: { UploadExcelComponent },
   data() {
     return {
       tableData: [],
diff --git a/src/views/example/form.vue b/src/views/form/components/ArticleDetail.vue
similarity index 96%
rename from src/views/example/form.vue
rename to src/views/form/components/ArticleDetail.vue
index c0a0a925..83227df8 100644
--- a/src/views/example/form.vue
+++ b/src/views/form/components/ArticleDetail.vue
@@ -148,6 +148,12 @@ const defaultForm = {
 export default {
   name: 'articleDetail',
   components: { Tinymce, MDinput, Upload, Multiselect, Sticky },
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     const validateRequire = (rule, value, callback) => {
       if (value === '') {
@@ -196,25 +202,13 @@ export default {
   computed: {
     contentShortLength() {
       return this.postForm.content_short.length
-    },
-    isEdit() {
-      return this.$route.meta.isEdit // 根据meta判断
-          // return this.$route.path.indexOf('edit') !== -1 // 根据路由判断
     }
   },
   created() {
     if (this.isEdit) {
       this.fetchData()
-    }
-  },
-  watch: {
-    // 如果路由有变化，会再次执行该方法
-    '$route'(to, from) {
-      if (this.isEdit) {
-        this.fetchData()
-      } else {
-        this.postForm = defaultForm
-      }
+    } else {
+      this.postForm = Object.assign({}, defaultForm)
     }
   },
   methods: {
diff --git a/src/views/form/create.vue b/src/views/form/create.vue
new file mode 100644
index 00000000..ea5302dc
--- /dev/null
+++ b/src/views/form/create.vue
@@ -0,0 +1,13 @@
+<template>
+  <article-detail :is-edit='false'></article-detail>
+</template>
+
+<script>
+import ArticleDetail from './components/ArticleDetail'
+
+export default {
+  name: 'createForm',
+  components: { ArticleDetail }
+}
+</script>
+
diff --git a/src/views/form/edit.vue b/src/views/form/edit.vue
new file mode 100644
index 00000000..097b6140
--- /dev/null
+++ b/src/views/form/edit.vue
@@ -0,0 +1,13 @@
+<template>
+  <article-detail :is-edit='true'></article-detail>
+</template>
+
+<script>
+import ArticleDetail from './components/ArticleDetail'
+
+export default {
+  name: 'editForm',
+  components: { ArticleDetail }
+}
+</script>
+
diff --git a/src/views/layout/components/AppMain.vue b/src/views/layout/components/AppMain.vue
index b0524d76..395378a3 100644
--- a/src/views/layout/components/AppMain.vue
+++ b/src/views/layout/components/AppMain.vue
@@ -1,7 +1,7 @@
 <template>
   <section class="app-main" style="min-height: 100%">
     <transition name="fade" mode="out-in">
-      <keep-alive>
+      <keep-alive :include='cachedViews'>
         <router-view></router-view>
       </keep-alive>
     </transition>
@@ -10,6 +10,14 @@
 
 <script>
 export default {
-  name: 'AppMain'
+  name: 'AppMain',
+  computed: {
+    cachedViews() {
+      return this.$store.state.app.cachedViews
+    }
+    // key() {
+    //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
+    // }
+  }
 }
 </script>
diff --git a/src/views/layout/components/TabsView.vue b/src/views/layout/components/TabsView.vue
index 3ba62820..82f4529d 100644
--- a/src/views/layout/components/TabsView.vue
+++ b/src/views/layout/components/TabsView.vue
@@ -11,7 +11,7 @@
 export default {
   computed: {
     visitedViews() {
-      return this.$store.state.app.visitedViews.slice(-6)
+      return this.$store.state.app.visitedViews
     }
   },
   mounted() {
diff --git a/src/views/theme/index.vue b/src/views/theme/index.vue
index e5ec3e23..5e37fb07 100644
--- a/src/views/theme/index.vue
+++ b/src/views/theme/index.vue
@@ -48,6 +48,7 @@ import { toggleClass } from '@/utils'
 import '@/assets/custom-theme/index.css' // 换肤版本element-ui css
 
 export default {
+  name: 'theme',
   data() {
     return {
       theme: false,
diff --git a/src/views/zip/index.vue b/src/views/zip/index.vue
index fa32a983..8a7c7b76 100644
--- a/src/views/zip/index.vue
+++ b/src/views/zip/index.vue
@@ -36,6 +36,7 @@
 import { fetchList } from '@/api/article'
 
 export default {
+  name: 'exportZip',
   data() {
     return {
       list: null,