refactor:add keep-alive && component add name

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>
 

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>
 

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>
 

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>
 

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
   },

src/views/errorLog/index.vue

@@ -14,6 +14,7 @@
 import errCode from './errcode'
 
 export default {
+  name: 'errorLog',
   components: { errCode }
 }
 </script>

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(),

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,

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 {

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
   },

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,

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>

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>

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,

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,

src/views/excel/selectExcel.vue

@@ -38,6 +38,7 @@
 import { fetchList } from '@/api/article'
 
 export default {
+  name: 'selectExcel',
   data() {
     return {
       list: null,

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: [],

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: {

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>
+

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>
+

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>

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() {

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,

src/views/zip/index.vue

@@ -36,6 +36,7 @@
 import { fetchList } from '@/api/article'
 
 export default {
+  name: 'exportZip',
   data() {
     return {
       list: null,