refactor:add keep-alive && component add name

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: '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: '/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 }

src/store/getters.js

 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,

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

src/views/charts/keyboard.vue

 <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

 <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

 <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

 <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/errlog/index.vue → 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/table.vue → 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

 <template>
-  <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/index.vue → 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

 <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/example/form.vue → 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
-      }
+      this.postForm = Object.assign({}, defaultForm)
     }
   },
   methods: {

src/views/form/create.vue

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

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

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