vue3 + ts + vite + element-plus根据url路径保持对应栏目高亮

上代码：

<template>

  <div class="main">

    <div class="main-left">

      <img :src="logo" alt="" width="200" height="60" @click="gourl('index')" />

      <div class="menus">

        <div

          class="menus-item"

          :class="[urlname == 'index' ? 'active' : '']"

          @click="gourl('index')"

        >

          <span class="text">000</span>

        </div>

        <div

          class="menus-item"

          :class="[urlname == 'aaa' ? 'active' : '']"

          @click="gourl('aaa')"

        >

          <span class="text">111</span>

        </div>

        <div

          class="menus-item"

          :class="[urlname == 'bbb' ? 'active' : '']"

          @click="gourl('bbb')"

        >

          <span class="text">222</span>

        </div>

        <div

          class="menus-item"

          :class="[urlname == 'ccc' ? 'active' : '']"

          @click="gourl('ccc')"

        >

          <span class="text">333</span>

        </div>

      </div>

    </div>

    <div class="main-right">

      <div class="main-right-top">

        <div>

          <el-dropdown>

            <el-icon><avatar /></el-icon>

            <span class="el-dropdown-link"> Yzp </span>

            <template #dropdown>

              <el-dropdown-menu>

                <el-dropdown-item command="a">Action 1</el-dropdown-item>

                <el-dropdown-item command="b">Action 2</el-dropdown-item>

                <el-dropdown-item command="c" @click="exit"

                  ><el-icon><switch-button /></el-icon>退出</el-dropdown-item

                >

              </el-dropdown-menu>

            </template>

          </el-dropdown>

        </div>

      </div>

      <div>

        <slot></slot>

      </div>

    </div>

  </div>

</template>

<script lang="ts" setup>

import { ref } from "vue"

import { useRouter } from "vue-router"

import logos from "@/assets/img/logo.svg"

const router = useRouter()

//img资源

const logo = ref(logos)

let urlname = router.currentRoute.value.name

function gourl(name: string) {

  if (router.resolve({ name }).name != urlname) {

    router.push({ name })

  }

}

function exit() {

  router.push("/")

}

</script>

<style scoped lang="scss">

.main {

  display: flex;

  flex-direction: row;

  width: 100%;

  .main-left {

    display: flex;

    width: 200px;

    flex-direction: column;

    img {

      background-color: #c0f1ec;

    }

    .menus {

      background-color: #c0f1ec;

      height: calc(100vh - 65px);

      .menus-item {

        display: flex;

        align-items: center;

        justify-content: center;

        height: 50px;

        width: 100%;

        background-color: #6acdbc;

        margin-bottom: 10px;

        cursor: pointer;

        color: white;

      }

      .active {

        background-color: white;

        color: #42adeb;

      }

    }

  }

  .main-right {

    width: calc(100% - 200px);

    flex-direction: column;

    .main-right-top {

      height: 60px;

      background-color: bisque;

      display: flex;

      justify-content: end;

      align-items: center;

      padding-right: 15px;

      div {

        display: flex;

        align-items: center;

        img {

          margin-right: 5px;

        }

      }

    }

  }

}

</style>