vue中，实现锚点定位及跳转过渡效果

<ul class="filter-nav">
      <li
        v-for="(item, index) in filterNavItem"
        class="filter-nav-item"
        :class="{ active: index == filterNavItemActive }"
        :data-target="item.target"
        @click="returnIdAddress('#' + item.target, index)"
      >
        {{ item.name }}
      </li>
    </ul>

 data() {
    return {
      filterNavItem: [
          { target: "team", name: "队员" },
          { target: "alarm", name: "事件" },
          { target: "car", name: "车辆" },
          { target: "patrol", name: "巡更点" }
      ],
      filterNavItemActive: 0,
    };
  },

returnIdAddress(id, index) {
      document.querySelector(id).scrollIntoView({
        behavior: "smooth"
      });
      this.filterNavItemActive = index;
    },