修改页签可以卸载页面store

.prettierrc

+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": true,
+  "arrowParens": "avoid",
+  "requirePragma": false,
+  "proseWrap": "preserve"
+}

examples/App.vue

@@ -4,42 +4,67 @@
       <template slot="nav">
         <sidebar-nav :routers="route" />
       </template>
-      <router-view></router-view>
+      <router-view v-if="routerDone" />
+      <div
+        class="loading-container"
+        v-else
+        v-loading="!routerDone"
+      ></div>
     </app-layout>
   </div>
 </template>
 
 <script>
 export default {
-  name: "app",
+  name: 'app',
   created() {
     console.log(this.route);
   },
   props: {
     route: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   },
   data() {
     let dataList = [];
     for (let index = 0; index < 20; index++) {
       dataList[index] = {
         id: index,
-        name: "asdad"
+        name: 'asdad',
       };
     }
     return {
+      routerDone: false,
       filters: {},
       dataList: dataList,
-      selectVal: "",
+      selectVal: '',
       pagination: {
         pageNum: 1,
         pageSize: 10,
-        total: 123
-      }
+        total: 123,
+      },
     };
+  },
+  mounted() {
+    this.showComponents();
+  },
+  watch: {
+    $route(newVal) {
+      this.routerDone = false;
+      if (newVal.meta && newVal.meta.store) {
+        newVal.meta.store.install(this.$store);
       }
+      this.showComponents();
+    },
+  },
+  methods: {
+    showComponents() {
+      this.$nextTick(vm => {
+        this.routerDone = true;
+      });
+    },
+  },
 };
 </script>
 

package.json

 {
   "name": "rym-element-ui",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "description": "任意门组件库",
   "main": "lib/rymUi.common.js",
   "scripts": {

src/components/Sidebar/Sidebar.vue

@@ -17,11 +17,11 @@
 </template>
 
 <script>
-import Vue from "vue";
-import SidebarItem from "./SidebarItem";
-import ScrollBar from "@/components/ScrollBar";
-import { Menu, MenuItem, Submenu } from "element-ui";
-import ImgIcon from "../ImgIcon/ImgIcon";
+import Vue from 'vue';
+import SidebarItem from './SidebarItem';
+import ScrollBar from '@/components/ScrollBar';
+import { Menu, MenuItem, Submenu } from 'element-ui';
+import ImgIcon from '../ImgIcon/ImgIcon';
 // import { constantRouterMap } from "../../../../router/index.js";
 Vue.component(Menu.name, Menu);
 Vue.component(Submenu.name, Submenu);
@@ -29,16 +29,16 @@ Vue.component(MenuItem.name, MenuItem);
 Vue.component(ImgIcon.name, ImgIcon);
 
 export default {
-  name: "sidebar-nav",
+  name: 'sidebar-nav',
   components: {
     SidebarItem,
-    ScrollBar
+    ScrollBar,
   },
   props: {
     routers: {
       type: Array,
-      default: () => []
-    }
+      default: () => [],
+    },
   },
   watch: {
     $route(newRoute, oldRoute) {
@@ -47,18 +47,18 @@ export default {
           oldRoute.matched[0].name || oldRoute.matched[0].path
         );
       }
-    }
+    },
   },
   computed: {
     isCollapse() {
       return this.$route.matched.length === 2;
-    }
-  }
+    },
+  },
 };
 </script>
 
 <style lang="scss">
-@import "../../assets/styles/variables.scss";
+@import '../../assets/styles/variables.scss';
 .sidebar-container {
   transition: width 0.28s;
   width: $sideBar-width;
@@ -152,6 +152,7 @@ export default {
     font-size: 12px;
   }
   .el-menu-item {
+    color: #fff !important;
     text-align: left;
     &:hover {
       background-color: $menuHover !important;
@@ -197,8 +198,9 @@ export default {
       position: relative;
       display: flex;
       align-items: center;
+      color: #fff !important;
       &::after {
-        content: "";
+        content: '';
         position: absolute;
         z-index: 2;
         bottom: -5px;
@@ -216,7 +218,6 @@ export default {
     }
     &.is-opened {
       .el-submenu__title {
-        color: #fff !important;
         background-color: $subMenuBg !important;
         &::after {
           opacity: 1;

src/components/TagsViews/TagsView.vue

@@ -32,38 +32,38 @@
 </template>
 
 <script>
-import ScrollPane from "../ScrollPane";
-import { mapGetters, mapActions } from "vuex";
-import store from "./store.js";
+import ScrollPane from '../ScrollPane';
+import { mapGetters, mapActions } from 'vuex';
+import store from './store.js';
 
 export default {
-  name: "tags-views",
+  name: 'tags-views',
   components: { ScrollPane },
   created() {
-    store.install();
+    store.install(this.$store);
   },
   data() {
     return {
       visible: false,
       top: 0,
       left: 0,
-      selectedTag: {}
+      selectedTag: {},
     };
   },
   computed: {
-    ...mapGetters(["visitedViews"])
+    ...mapGetters(['visitedViews']),
   },
   watch: {
     $route() {
       this.addViewTags();
       this.moveToCurrentTag();
-    }
+    },
   },
   mounted() {
     this.addViewTags();
   },
   methods: {
-    ...mapActions(["addVisitedViews", "delVisitedViews"]),
+    ...mapActions(['addVisitedViews', 'delVisitedViews']),
     generateRoute() {
       if (this.$route.name) {
         return this.$route;
@@ -78,7 +78,6 @@ export default {
       if (!route) {
         return false;
       }
-      if (route.meta.store) route.meta.store.install();
       this.addVisitedViews(route);
     },
     moveToCurrentTag() {
@@ -93,19 +92,19 @@ export default {
       });
     },
     closeSelectedTag(view) {
-      if (view.store) view.store.uninstall();
+      if (view.store) view.store.uninstall(this.$store);
       this.delVisitedViews(view).then(views => {
         if (this.isActive(view)) {
           const latestView = views.slice(-1)[0];
           if (latestView) {
             this.$router.push(latestView.path);
           } else {
-            this.$router.push("/");
+            this.$router.push('/');
           }
         }
       });
-    }
-  }
+    },
+  },
 };
 </script>
 

src/components/TagsViews/store.js

 import TagsViewStore from './TagsView.js';
 
 export default {
-  install() {
-    const store = window[Symbol.for('vueAppStore')];
+  install(store) {
+    console.log(store);
 
     if (!store.state.app) {
       store.registerModule(['app'], {
@@ -13,8 +13,7 @@ export default {
       store.registerModule(['app', 'tagsView'], TagsViewStore);
     }
   },
-  uninstall() {
-    const store = window.$store;
+  uninstall(store) {
     store.unregisterModule(['app', 'tagsView']);
   },
 };