vue2 使用指令封装定位标签 点击标签滚动到页面相应位置，并且实现页面活动对应标签高亮功能

首先，我们需要使用 `vue-router`，确保页面内的 hash 能够正确地被监听和匹配。然后，我们可以使用 Vue 自定义指令来实现标签定位和高亮功能。

以下是实现方法：

1. 在 router.js 中，配置路由的 `scrollBehavior` 选项来启用 hash 模式：

const router = new VueRouter({
  mode: 'history',
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    if (to.hash) {
      return {
        selector: to.hash,
        behavior: 'smooth'
      }
    } else {
      return { x: 0, y: 0 }
    }
  }
})

2. 在页面中创建标签列表，并使用 `v-for` 指令生成标签：

<div>
  <ul>
    <li v-for="item in items" :key="item.id">
      <a v-scroll-to="item.anchor">{{ item.title }}</a>
    </li>
  </ul>
</div>

在上面的代码中，我们使用 `v-for` 指令循环生成标签，并且为每个标签添加自定义指令 `v-scroll-to`。这个指令会在标签被点击时触发。

3. 创建自定义指令 `v-scroll-to`，在指令中实现标签定位和高亮功能：

Vue.directive('scroll-to', {
  bind: function (el, binding) {
    el.addEventListener('click', function (event) {
      event.preventDefault()
      const target = document.querySelector(binding.value)
      if (target) {
        window.scrollTo({
          top: target.offsetTop,
          behavior: 'smooth'
        })
        const activeClass = 'is-active'
        const lis = document.querySelectorAll('li')
        lis.forEach((li) => {
          li.classList.remove(activeClass)
        })
        el.parentNode.classList.add(activeClass)
      }
    })
  }
})

在自定义指令中，我们首先监听标签的点击事件，然后获取标签的 `href` 属性值，该值应该是对应的定位标签的 `id` 名称。接下来，我们使用 `querySelector` 获取对应的定位标签，并通过 `window.scrollTo` 方法滚动到该标签位置。

最后，我们实现了高亮功能，将当前标签的父级 `li` 元素添加 `is-active` 类，同时移除其他标签的高亮类。

通过以上步骤，我们就能够实现基本的标签定位和高亮功能。