路由跳转默认激活样式问题

scss 样式重复问题

注意

当使用 vite 引入 scss 全局变量时（例如：variables.module.scss），如果此 variable.module.scss 全局变量还在 js 或者 ts 中引入使用的话，那么会报错 SassError: This file is already being loaded。

那么要如何解决此问题呢？很简单，只需要添加一个 global.module.scss 文件即可。

// 引入要进行全局使用的 scss, 如 variables.module.scss
@import 'variables.module.scss';

然后在 js 或者 ts 中，把引入的 variables.module.scss 变为 global.module.scss 即可

修改 SideBarMenu

• 路由跳转 router

• 默认激活 default-active

• 样式问题方便日后换主题

<template>
  <el-menu
    :uniqueOpened="true"
    router
    :default-active="activeMenu"
    :background-color="variables.menuBg"
    :text-color="variables.menuText"
    :active-text-color="variables.menuActiveText"
    :collapse="useCollapse().sidebarOpened"
  >
    <SideBarItem
      v-for="item in routes"
      :key="item.path"
      :route="item"
    ></SideBarItem>
  </el-menu>
</template>

<script setup>
import { filterRouters, generateMenus } from "@/utils/route";
import { useVariables } from "@/stores/variables";
import { useCollapse } from "@/stores/sidebaropen";
/* 获取 变量 */
const { variables } = useVariables();
/* 获取路由 */
const router = useRouter();
const routes = computed(() => {
  const filterRoutes = filterRouters(router.getRoutes());
  return generateMenus(filterRoutes);
});
/* 计算高亮 */
const route = useRoute();

const activeMenu = computed(() => {
  const { meta, path } = route;

  if (meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;
});
</script>

<style lang="scss">
.el-menu {
  border-right: none;
}
</style>