fe-student/src/App.vue

<!--
 * @Author: lixg lixg@dongwu-inc.com
 * @Date: 2022-11-21 17:28:10
 * @LastEditors: lixg lixg@dongwu-inc.com
 * @LastEditTime: 2022-12-13 18:56:24
 * @FilePath: /fe-stu/src/App.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="container">
    <div id="nav">
      <router-link
        v-for="item in routes"
        :key="item.path"
        :to="item.path"
        :class="{
          link: true,
          active: name === item.name,
        }"
      >
        {{ item.name }}
      </router-link>
    </div>
    <main>
      <router-view />
    </main>
  </div>
</template>
<script>
import { computed, defineComponent } from "vue";
import { useRouter, useRoute } from "vue-router";
export default defineComponent({
  setup() {
    const router = useRouter();
    const route = useRoute();
    console.log("router", router.getRoutes(), route);
    console.log(import.meta.env.DEV)
    const routes = computed(() => {
      return router.getRoutes().filter((e) => e.meta?.isLink);
    });

    const currentRouteName = computed(() => route.name);

    // localStorage.setItem(
    //   "token",
    //   "eyJ0eXBlIjoidG9rZW4iLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC91LmJvZS5jb20iLCJpYXQiOjE2NzA3NjExNzIsImV4cCI6MTY3MDc2ODM3MiwiR2l2ZW5OYW1lIjoiYm9ldSIsInVzZXJJZCI6IjZCMDQ5RkFGLUMzMTQtN0NDRi0wRDI4LTBEMjNGNEM0MjUzMSIsInVJZCI6Ijk2NTM0MjAyNzQ5NzYwNzE2OCIsInBlcm1pc3Npb24iOiIifQ==.9e8c4d3933c3a6d9b660e0b849940c813e1c245b3d17646ff7a793100640bc42"
    // );
    return {
      routes,
      name: currentRouteName,
    };
  },
});
</script>
<style lang="scss">
#app {
  // font-family: MicrosoftYaHei, Microsoft YaHei, Avenir, Helvetica, Arial,
  // sans-serif;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
}

#container {
  display: flex;
  width: 100%;
  min-height: 100%;
  background-color: rgba(242, 245, 247, 1);
  // background-color: #ccc;
  #nav {
    width: 220px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 0;
    box-sizing: border-box;
    background: #f1f1f1;
    box-shadow: 0 5px 15px 8px rgba(1, 22, 54, 0.795);

    .link {
      text-decoration: none;
      color: rgb(0, 0, 0);
      padding: 10px;
      transition: all 0.4s;
      text-align: center;

      &:hover {
        background: rgba(4, 37, 223, 0.274);
        color: #f1f1f1;
      }

      &.active {
        color: #f1f1f1;
        background: rgba(17, 120, 255, 0.74);
      }
    }
  }
  main {
    flex: 1;
    width: 100%;
    // padding: 30px;
    box-sizing: border-box;
  }
}
</style>