Vue项目 watch监听路由地址

例1：Header.vue

<template>
  <!-- 首页头部组件 -->
  <div class="header">
    <div class="index-header">
      <div class="header-content">
        <!-- 头部logo -->
        <div class="content-logo">
          <img src="/image/logo.png" alt="" />
        </div>
        <!-- 头部导航 -->
        <div class="content-nav">
          <ul>
            <li>
              <router-link
                to="/"
                style="cursor: pointer"
                :class="actives === '1' ? 'actives' : ''"
                >首 页</router-link
              >
            </li>
            <li>
              <router-link
                to="/course"
                style="cursor: pointer"
                :class="actives === '2' ? 'actives' : ''"
                >课 程</router-link
              >
            </li>
            <li>
              <router-link
                to="/member"
                style="cursor: pointer"
                :class="actives === '3' ? 'actives' : ''"
                >会 员</router-link
              >
            </li>
          </ul>
        </div>
        <!-- 搜索、购物车、登录注册 -->
        <div class="searBuyLogin">
          <!--头部搜索框-->
          <div class="content-search">
            <input type="text" placeholder="请输入要搜索的课程" />
            <i class="el-icon-search" style="cursor: pointer"></i>
          </div>
          <div class="content-Shopping" style="cursor: pointer">
            <el-badge class="item">
              <router-link to="/cart">
                <i class="el-icon-shopping-cart-1"></i>
              </router-link>
            </el-badge>
            <!-- <i class="el-icon-shopping-cart-1"></i> -->
          </div>
          <div class="content-login-success">
            <!-- <div style="cursor: pointer">我的课程</div> -->
            <div>
              <!-- <img
                class="avator"
                src=""
                alt=""
              /> -->
              <!-- <img class="avator" alt="" /> -->
              <!-- 头像信息 -->
            </div>
          </div>
          <div class="content-login">登录 / 注册</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      actives: "1",
    };
  },
  watch: {
    $route: {
      immediate: true, //确认是否以当前的初始值执行handler函数
      handler(to, from) {
        let newUrl = to.fullPath;
        console.log(newUrl);
        if (newUrl === "/") {
          this.actives = "1";
        } else if (newUrl === "/course") {
          this.actives = "2";
        } else if (newUrl === "/member") {
          this.actives === "3";
        }
      },
    },
  },
};
</script>

例2：About.vue

<div class="about-left">
          <div class="about-list">
            <div
              v-for="(item, index) in aboutList"
              :key="item.id"
              @click="goDetail(index)"
            >
              <router-link :to="item.link">
                <div
                  class="about-list-item"
                  :class="current === index ? 'active' : ''"
                >
                  <img
                    :src="current === index ? item.selectImg : item.imgUrl"
                    alt=""
                  />
                  <p class="list-title">{{ item.title }}</p>
                </div>
              </router-link>
            </div>
            <div class="code-container">
              <i class="fa fa-gift code" aria-hidden="true"></i>
              <span>兑换码</span>
            </div>
          </div>
</div>

<div class="about-right">
          <router-view></router-view>
</div>

data() {
    return {
      aboutList: [
        {
          id: 1,
          imgUrl: "/image/about/my-course.png",
          selectImg: "/image/about/my-course-select.png",
          title: "我的课程",
          link: "/about/my-course",
        },
        {
          id: 2,
          imgUrl: "/image/about/collean.png",
          selectImg: "/image/about/collean-select.png",
          title: "收藏",
          link: "/about/collection",
        },
        {
          id: 3,
          imgUrl: "/image/about/order.png",
          selectImg: "/image/about/order-select.png",
          title: "订单",
          link: "/about/order",
        },
        {
          id: 4,
          imgUrl: "/image/about/mess.png",
          selectImg: "/image/about/mess-select.png",
          title: "消息",
          link: "/about/message",
        },
      ],
    };
  },

 watch: {
    $route: {
      immediate: true,
      handler(to, from) {
        let curpath = to.path;
        let curIndex = this.aboutList.findIndex((item) => {
          return item.link === curpath;
        });
        this.current = curIndex;
      },
    },
  },
  methods: {
    goDetail(index) {
      this.current = index;
    },
  },