传统的项目中使用锚点，多是采用以下方式：

<a href="#A">A</a>  
<a href="#B">B</a>

<p>123456789<p>  
<p>123456789<p>  
<p>123456789<p>  
<p>123456789<p>  
<a id="A"></a>  
<p>123456789<p>  
<p>123456789<p>  
<p>123456789<p>  
<p>123456789<p>  
<a id="B"></a>  
<p>123456789<p>  
<p>123456789<p>  
<p>123456789<p>  
<p>123456789<p>  

但是在vue中可能有些问题，但也适用，但是相对麻烦
1.使用传统方式
由于router-link的缘故，会自带当前网址的部分，因此采用a标签

<div class="alphabetical">  
    <ul>  
        <li v-for="(item, index) of alphabet" :key="index">  
            <a :href="'#foreign-'+item" v-if="category" @click="goAnchor('#foreign-'+item)">{{item}}</a>  
            <a :href="'#anchor-'+item" @click="goAnchor('#anchor-'+index)" v-else>{{item}}</a>  
        </li>  
    </ul>  
</div>

###########################################  
<div class="cities" v-for="(city, name) of cities" :key="name">  
    <a :id="'foreign-'+name" v-if="category"></a>  
    <a :id="'anchor-'+name" v-else></a>  
    <common :city="city" :index="name"></common>  
</div>  

效果正常，但是刷新页面时，可能就存在问题了。因此在父组件中，编写方法，在刷新时，处理锚点后缀就可以了。
2.使用滚动(推荐)

<!--Html1-->  
<ul>  
    <li v-for="(item, index) of alphabet" :key="index">  
        <a href="javascript:;" v-if="category" @click="goAnchor('foreign-'+item)">{{item}}</a>  
        <a href="javascript:;" v-else @click="goAnchor('anchor-'+item)">{{item}}</a>  
    </li>  
</ul>  
<script>  
methods: {  
    goAnchor (selector) {  
      var anchor = document.getElementById(selector)  
      document.body.scrollTop = anchor.offsetTop // Chrome  
      document.documentElement.scrollTop = anchor.offsetTop // Firefox  
    }  
}  
</script>

<!--2-->  
<div class="cities" v-for="(city, name) of cities" :key="name">  
    <a :id="'foreign-'+name" v-if="category"></a>  
    <a :id="'anchor-'+name" v-else></a>  
    <common :city="city" :index="name"></common>  
</div>  

3.使用Vue Router(适用于history模式)
暂时没试过，试过后继续写