vue路由变化时，改变导航栏的样式并切换页面

记录会遇到的问题，复习小笔记！

各种导航栏适用，单机某个导航按钮，跳转另一个页面，并改变导航栏样式。

这里我用的是通过动态class和$route.path来实现tab样式的切换

导航栏页面

请自行解析，有问题留言哈

<template>
    <div>
        <ul class="hlist_content" v-show="isShow2">
          <!-- <li
            v-for="(item, id) in navData"
            :class="{ active1: active === id }"
            :key="id"
            @click="(active = id), $router.push({ path: item.path })"
          >
            {{ item.name }}
          </li> -->
          <li
            :class="{ active: '/' === $route.path }"
            @click="goTo('/')"
          >
            首页
          </li>
          <li
            :class="{ active: '/regard' === $route.path }"
            @click="goTo('/regard')"
          >
            关于
          </li>
          <li
            :class="{ active: '/serve' === $route.path }"
            @click="goTo('/serve')"
          >
            服务
          </li>
          <li
            :class="{ active: '/case' === $route.path }"
            @click="goTo('/case')"
          >
            案例
          </li>
          <li
            :class="{ active: '/news' === $route.path }"
            @click="goTo('/news')"
          >
            新闻
          </li>
          <li
            :class="{ active: '/relation' === $route.path }"
            @click="goTo('/relation')"
          >
            联系
          </li>
        </ul>
    </div>
</template>
<script>
    export default {
 
      methods: {
        goTo(path) {
          this.$router.replace(path);
        },

    };
</script>
<style scoped lang="less">
.active {                  //动态类名的样式
  color: #3a82f3;
}
.active {
  color: #3a82f3 !important;
}
.active::after {
  content: "";
  display: block;
  color: #3a82f3;
  position: absolute;
  top: 70%;
  left: 37%;
  width: 0;
  height: 0px;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  border: 8px;
  border-style: dashed dashed solid dashed;
  border-color: #3a82f3 transparent transparent transparent;
}
</style>

router/index.vue  记得配置路由！！！

尊重原创！

原作者指路:(46条消息) 当vue路由变化时，改变导航栏的样式的方法_yukilong的博客-CSDN博客