'关闭标签后销毁组件'

src/components/common/Home.vue

@@ -6,7 +6,7 @@
             <v-tags></v-tags>
             <div class="content">
                 <transition name="move" mode="out-in">
-                    <keep-alive>
+                    <keep-alive :include="tagsList">
                         <router-view></router-view>
                     </keep-alive>
                 </transition>
@@ -19,10 +19,11 @@
     import vHead from './Header.vue';
     import vSidebar from './Sidebar.vue';
     import vTags from './Tags.vue';
-    import bus from '../common/bus';
+    import bus from './bus';
     export default {
         data(){
             return {
+                tagsList: [],
                 collapse: false
             }
         },
@@ -33,6 +34,15 @@
             bus.$on('collapse', msg => {
                 this.collapse = msg;
             })
+
+            // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
+            bus.$on('tags', msg => {
+                let arr = [];
+                for(let i = 0, len = msg.length; i < len; i ++){
+                    msg[i].name && arr.push(msg[i].name);
+                }
+                this.tagsList = arr;
+            })
         }
     }
 </script>

src/components/common/Tags.vue

@@ -23,6 +23,7 @@
 </template>
 
 <script>
+    import bus from './bus';
     export default {
         data() {
             return {
@@ -31,14 +32,14 @@
         },
         methods: {
             isActive(path) {
-                return path === this.$route.path;
+                return path === this.$route.fullPath;
             },
             // 关闭单个标签
             closeTags(index) {
                 const delItem = this.tagsList.splice(index, 1)[0];
                 const item = this.tagsList[index] ? this.tagsList[index] : this.tagsList[index - 1];
                 if (item) {
-                    delItem.path === this.$route.path && this.$router.push(item.path);
+                    delItem.path === this.$route.fullPath && this.$router.push(item.path);
                 }else{
                     this.$router.push('/');
                 }
@@ -51,19 +52,21 @@
             // 关闭其他标签
             closeOther(){
                 const curItem = this.tagsList.filter(item => {
-                    return item.path === this.$route.path;
+                    return item.path === this.$route.fullPath;
                 })
                 this.tagsList = curItem;
             },
             // 设置标签
             setTags(route){
                 const isExist = this.tagsList.some(item => {
-                    return item.path === route.path;
+                    return item.path === route.fullPath;
                 })
                 !isExist && this.tagsList.push({
                     title: route.meta.title,
-                    path: route.path
+                    path: route.fullPath,
+                    name: route.matched[1].components.default.name
                 })
+                bus.$emit('tags', this.tagsList);
             },
             handleTags(command){
                 command === 'other' ? this.closeOther() : this.closeAll();

src/components/page/BaseCharts.vue

@@ -34,6 +34,7 @@
 <script>
     import Schart from 'vue-schart';
     export default {
+        name: 'basecharts',
         components: {
             Schart
         },

src/components/page/BaseForm.vue

@@ -64,6 +64,7 @@
 
 <script>
     export default {
+        name: 'baseform',
         data: function(){
             return {
                 options:[

src/components/page/BaseTable.vue

@@ -69,6 +69,7 @@
 
 <script>
     export default {
+        name: 'basetable',
         data() {
             return {
                 url: './static/vuetable.json',

src/components/page/Dashboard.vue

@@ -99,6 +99,7 @@
 
 <script>
     export default {
+        name: 'dashboard',
         data() {
             return {
                 name: localStorage.getItem('ms_username'),

src/components/page/DragList.vue

@@ -49,6 +49,7 @@
 <script>
     import draggable from 'vuedraggable'
     export default {
+        name: 'draglist',
         data() {
             return {
                 dragOptions:{

src/components/page/Markdown.vue

@@ -21,6 +21,7 @@
     import { mavonEditor } from 'mavon-editor'
     import 'mavon-editor/dist/css/index.css'
     export default {
+        name: 'markdown',
         data: function(){
             return {
                 content:'',

src/components/page/Tabs.vue

@@ -72,6 +72,7 @@
 
 <script>
     export default {
+        name: 'tabs',
         data() {
             return {
                 message: 'first',

src/components/page/Upload.vue

@@ -47,6 +47,7 @@
 <script>
     import VueCropper  from 'vue-cropperjs';
     export default {
+        name: 'upload',
         data: function(){
             return {
                 defaultSrc: './static/img/img.jpg',

src/components/page/VueEditor.vue

@@ -23,6 +23,7 @@
     import 'quill/dist/quill.bubble.css';
     import { quillEditor } from 'vue-quill-editor';
     export default {
+        name: 'editor',
         data: function(){
             return {
                 content: '',