<template> <div> <section class="pc"> <ul class="head_list" v-for="(item,indx) in memu" :key="indx"> <li :class="topath==item.path? 'xz':''"> <router-link :to="item.path">{{item.name}}</router-link> </li> </ul> </section> </div> </template> <script> Export default {name: "Header", data() {return {memu: [{name: "home ", path: "/"}, {name:" company registration ", path: "/ About"}, {name: "page list", path: "/ Lb"}], topath: '}; }, watch: { $route: { immediate: true, handler: function(val, oldVal) { this.topath=val.path } } } }; </script> <style scoped> .xz { color: #014898; border-bottom: 2px solid #014898; padding-bottom: 10px; } </style>Copy the code