Подсветка активного меню

@AnnGeints · Регистрация: 04.01.2022

Author24 — интернет-сервис помощи студентам

Здравствуйте, нужно сделать подсветку активного пункта меню.

HTML5

<template>
  <div>
    <div class="logo">
      <a href="/" class="logoa">
        Здесь логотип
        <img src="" alt="">
      </a>
 
    </div>
    <div class="menu">
 
      <ul class="menu">
        <li><span><router-link to="/Gallery">Галерея</router-link></span></li>
        <li><span><router-link to="/Shop">Магазин</router-link></span></li>
        <li><span><router-link to="/Order">Заказ</router-link></span></li>
        <li><span><router-link to="/Me">Обо мне</router-link></span></li>
        <li><span><router-link to="/FAQ">FAQ</router-link></span></li>
      </ul>
    </div>
    <section>
      <router-view />
    </section>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  components: {
    
  },
  methods:{
    activeMenu(){
      ('ul#menu li span').each(function () {if (this.getElementsByTagName("router-link")[0].href == location.href) this.className = "active";});
    }
  }
}
</script>
 
<style>
li.active a{color: #00cccc;}
 
</style>

Router.js

Javascript

import {createRouter, createWebHistory} from "vue-router";
/*Gallery*/ 
const Gallery=()=>import('../components/Gallery/GalleryPage')
const GalleryCards=()=>import('../components/Gallery/GalleryCards')
const GalleryToys=()=>import('../components/Gallery/GalleryToys')
 
// const UploadFilesService=()=>import("../services/UploadFilesService")
/*Shop*/
const Shop=()=>import('../components/Shop/ShopPage') 
 
const Order=()=>import('../components/OrderPage')
const Me=()=>import('../components/AboutMePage')
const FAQ=()=>import('../components/FAQPage')
const routes = [
    {
        Path: '/',
        alias:"/Hello",
        name:"hello",
        component: ()=>import("../components/HelloWorld")
       
    },
    {
        path:'/Gallery',
        component:Gallery
    },
    {
        path:'/GalleryCards',
        component:GalleryCards
    },
    {
        path:'/GalleryToys',
        component:GalleryToys
    },
    {
        path:'/Shop',
        component:Shop
    },
    {
        path:'/Order',
        component:Order
    },
    {
        path:'/Me',
        component:Me
    },
    {
        path:'/FAQ',
        component:FAQ
    },
    /*{
        path:'/GalleryCards',
        component:UploadFilesService
    }
*/
       
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

	15.12.2023, 12:18