commit code

src/layout/components/AppMain.vue

@@ -0,0 +1,23 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transfrom" mode="out-in">
+      <keep-alive :include="cachedViews">
+        <router-view :key="key" />
+      </keep-alive>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    cachedViews() {
+      return this.$store.state.tagsView.cachedViews
+    },
+    key() {
+      return this.$route.path
+    }
+  }
+}
+</script>

src/layout/components/Item.vue

@@ -0,0 +1,29 @@
+<script>
+export default {
+  name: 'MenuItem',
+  functional: true,
+  props: {
+    icon: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  render(h, context) {
+    const { icon, title } = context.props
+    const vnodes = []
+
+    if (icon) {
+      vnodes.push(<svg-icon icon-class={icon}/>)
+    }
+
+    if (title) {
+      vnodes.push(<span slot='title'>{(title)}</span>)
+    }
+    return vnodes
+  }
+}
+</script>

src/layout/TopMenus.vue → src/layout/components/TopMenus.vue

@@ -1,12 +1,15 @@
 <template>
-  <el-menu :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="horizontal">
-    <sidebar-item v-for="route in sidebarRouters" :key="route.path" :item="route" :base-path="route.path" />
-  </el-menu>
+  <div>
+    <el-menu :default-active="activeMenu" :background-color="variables.menuBg" :text-color="variables.menuText" :active-text-color="variables.menuActiveText" :collapse-transition="false" mode="horizontal">
+      <el-menu-item v-for="route in sidebarRouters" :key="route.path" :item="route" :base-path="route.path" />
+    </el-menu>
+  </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
 import variables from '@/assets/styles/variables.scss'
+
 export default {
   name: 'TopMenus',
   computed: {
@@ -23,11 +26,6 @@ export default {
     variables() {
       return variables
     }
-  },
-  methods: {
-    handleSelect(key, keyPath) {
-      console.log(key, keyPath)
-    }
   }
 }
 </script>

src/layout/components/index.js

@@ -0,0 +1,2 @@
+export { default as AppMain } from './AppMain'
+export { default as TopMenus } from './TopMenus'

src/layout/index.js

@@ -1 +0,0 @@
-export { default as TopMenus } from './TopMenus.vue'

src/layout/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <div>
+    <top-menus />
+  </div>
+</template>
+
+<script>
+import TopMenus from './components/TopMenus.vue'
+import { mapState } from 'vuex'
+export default {
+  name: 'Layout',
+  components: { TopMenus },
+  computed: {
+    ...mapState({
+      TopMenus: state => state.app.sidebar
+    }),
+    classObj() {
+      return {
+        hideSidebar: !this.sidebar.opened
+      }
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  @import "~@/assets/styles/mixin.scss";
+  @import "~@/assets/styles/variables.scss";
+
+  .app-wrapper {
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+
+    &.mobile.openSidebar {
+      position: fixed;
+      top: 0;
+    }
+  }
+
+  .drawer-bg {
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
+  }
+
+  .fixed-header {
+    position: fixed;
+    top: 0;
+    right: 0;
+    z-index: 9;
+    width: calc(100% - #{$sideBarWidth});
+    transition: width 0.28s;
+    padding: 0;
+  }
+
+  .hideSidebar .fixed-header {
+    width: calc(100% - 54px)
+  }
+
+  .mobile .fixed-header {
+    width: 100%;
+  }
+</style>

src/router/index.js

@@ -63,8 +63,8 @@ router.beforeEach((to, from, next) => {
       next()
     } else {
       // 否则全部重定向到登录页面
-      // next(`/loginredirect=${to.fullPath}`)
-      next()
+      next(`/login?redirect=${to.fullPath}`)
+      // next()
       NProgress.done()
     }
   }

src/router/routers.js

@@ -6,7 +6,7 @@ Vue.use(Router)
 
 export const constantRouterMap = [
   {
-    path: '/',
+    path: '/login',
     meta: { title: '登录', noCache: true },
     component: (resolve) => require(['@/views/login'], resolve),
     hidden: true
@@ -20,18 +20,22 @@ export const constantRouterMap = [
     path: '/401',
     component: (resolve) => require(['@/views/features/401'], resolve),
     hidden: true
+  },
+  {
+    path: '/redirect',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: '/redirect/:path*',
+        component: (resolve) => require(['@/views/features/redirect'], resolve)
+      }
+    ]
+  },
+  {
+    path: '/',
+    component: Layout
   }
-  // {
-  //   path: '/redirect',
-  //   component: Layout,
-  //   hidden: true,
-  //   children: [
-  //     {
-  //       path: '/redirect/:path*',
-  //       component: (resolve) => require(['@/views/features/redirect'], resolve)
-  //     }
-  //   ]
-  // }
 
 ]
 

src/store/modules/user.js

@@ -44,7 +44,7 @@ const user = {
     },
 
     // 获取用户信息
-    getInfo({ commit }) {
+    GetInfo({ commit }) {
       return new Promise((resolve, reject) => {
         getInfo().then(res => {
           setUserInfo(res, commit)

src/views/login.vue

@@ -143,7 +143,7 @@ export default {
 
           this.$store.dispatch('Login', user).then(() => {
             this.loading = false
-            this.$router.push({ path: this.redirect || '/layout/TopMenus' })
+            this.$router.push({ path: this.redirect || '/' })
           }).catch(() => {
             this.loading = false
             this.getCode()