提交

1

src/components/layout/index.module.less

@@ -10,7 +10,8 @@
 .silder {
   width: 100px;
   background: #3044ca;
-  min-height: 100%;
+  min-height: 100vh;
+  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -204,3 +205,19 @@
     margin-top: 16px;
   }
 }
+:global {
+  .fade-slide-leave-active,
+  .fade-slide-enter-active {
+    transition: all 0.3s;
+  }
+
+  .fade-slide-enter-from {
+    opacity: 0;
+    transform: translateX(-30px);
+  }
+
+  .fade-slide-leave-to {
+    opacity: 0;
+    transform: translateX(30px);
+  }
+}

src/components/layout/index.tsx

@@ -1,8 +1,9 @@
-import { defineComponent } from 'vue';
+import { Transition, defineComponent } from 'vue';
 import LayoutSilder from './layoutSilder';
 import LayoutTop from './layoutTop';
 import styles from './index.module.less';
 import { NScrollbar } from 'naive-ui';
+import { RouterView } from 'vue-router';
 export default defineComponent({
   name: 'layoutView',
   setup() {
@@ -16,7 +17,13 @@ export default defineComponent({
             <div class={styles.Wrapcore}>
               <LayoutTop></LayoutTop>
               <div class={styles.WrapcoreView}>
-                <router-view></router-view>
+                <router-view>
+                  {(obj: any) => (
+                    <Transition name="fade-slide">
+                      <obj.Component />
+                    </Transition>
+                  )}
+                </router-view>
               </div>
             </div>
           </div>

src/components/layout/layoutSilder.tsx

@@ -17,23 +17,28 @@ import setNormal from './images/setNormal.png';
 import studentIcon from './images/studentIcon.png';
 import studentNormal from './images/studentNormal.png';
 import SilderItem from './modals/silderItem';
+import { useRoute, useRouter } from 'vue-router';
 export default defineComponent({
   name: 'layoutSilder',
   setup() {
+    const router = useRouter();
+    const route = useRoute();
     const itemInfoList = reactive([
       {
         activeIcon: indexIcon,
         name: '主页',
         normalIcon: indexNormal,
         isActive: true,
-        id: 1
+        id: 1,
+        router: '/'
       },
       {
         activeIcon: studentIcon,
         name: '学生',
         normalIcon: studentNormal,
         isActive: false,
-        id: 2
+        id: 2,
+        router: '/studentList'
       },
       {
         activeIcon: classIcon,
@@ -72,7 +77,6 @@ export default defineComponent({
       }
     ]);
     const checkNavBar = (item: any) => {
-      console.log('checkNavBar', item);
       itemInfoList.forEach((now: any) => {
         now.isActive = false;
       });
@@ -81,6 +85,9 @@ export default defineComponent({
           now.isActive = true;
         }
       });
+      if (item.router) {
+        router.push(item.router);
+      }
       console.log('checkNavBar', item);
     };
     return () => (

src/components/layout/modals/silderItem.tsx

@@ -14,7 +14,6 @@ export default defineComponent({
     watch(
       () => props.item,
       val => {
-        console.log(val, 'myItem');
         myItem.value = val;
       },
       {

src/router/routes/index.ts

@@ -18,6 +18,12 @@ export const constantRoutes: any[] = [
         path: '',
         name: 'Home',
         component: () => import('@/views/home/index')
+      },
+      {
+        //默认 显示home组件
+        path: '/studentList',
+        name: 'studentList',
+        component: () => import('@/views/studentList/index')
       }
     ]
   },

src/views/studentList/index.tsx

@@ -0,0 +1,10 @@
+import { defineComponent } from 'vue';
+import styles from './index.module.less';
+import { NImage } from 'naive-ui';
+import teacherHeader from '@/components/layout/images/teacherIcon.png';
+export default defineComponent({
+  name: 'student-studentList',
+  setup(props, { emit }) {
+    return () => <>学生列表</>;
+  }
+});