suqian_account/src/layout/Lefter.vue

<!--
 * @Author: jixiang
 * @Date: 2021-08-14 10:17:45
 * @Description: nav
 * @FilePath: /book_account/src/layout/Lefter.vue
 * One World One Drefeel(56580223@qq.com)
-->
<template>
  <div class="left_Navigation">
    <a-menu
      v-model:selectedKeys="state.selectedKeys"
      mode="inline"
      :theme="state.theme"
      @click="onClick"
    >
      <a-menu-item key="/bookManage"> 图书管理</a-menu-item>
    </a-menu>
  </div>
</template>

<script lang="ts" setup>
  import { WalletOutlined } from '@ant-design/icons-vue';
  import { defineComponent, reactive } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  const state = reactive({
    theme: 'light',
    selectedKeys: ['/bookManage'],
  });
  const router = useRouter();
  const routers = useRoute();
  function goToPage(path, pathName) {
    router.push({
      path: path,
    });
  }
  const onClick = (e) => {
    console.log(e, routers);
    router.push({
      path: e.key,
    });
  };
</script>

<style lang="less" scoped>
  .left_Navigation {
    background: #fff;
    border-right: 1px solid #f0f0f0;
    height: calc(100vh - 6.4rem);
    padding-top: 2rem;
    // position: fixed;
    width: 20rem;
    .item {
      cursor: pointer;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
  }
</style>