vue如何点击跳转到相应的位置

在Vue中，可以使用`vue-router`路由库来实现点击跳转到相应位置的功能。具体步骤如下：

1. 在Vue项目中安装`vue-router`路由库：`npm install vue-router`

2. 在Vue项目中创建一个`router.js`文件，并在其中定义路由规则。例如：

   import Vue from 'vue'
   import Router from 'vue-router'
   
   Vue.use(Router)
   
   export default new Router({
     routes: [
       {
         path: '/',
         name: 'Home',
         component: Home
       },
       {
         path: '/about',
         name: 'About',
         component: About
       },
       {
         path: '/contact',
         name: 'Contact',
         component: Contact
       }
     ]
   })

3. 在Vue项目的入口文件`main.js`中引入`router.js`文件，并将其挂载到Vue实例上。例如：

   import Vue from 'vue'
   import App from './App.vue'
   import router from './router'
   
   new Vue({
     router,
     render: h => h(App),
   }).$mount('#app')

4. 在Vue组件中使用`<router-link>`标签来实现点击跳转到相应位置的功能。例如：

   <template>
     <div>
       <router-link to="/">Home</router-link>
       <router-link to="/about">About</router-link>
       <router-link to="/contact">Contact</router-link>
     </div>
   </template>

当用户点击`<router-link>`标签时，路由库会根据`to`属性中的路径进行跳转。

另外，如果需要在页面中跳转到相应位置，可以使用`<a>`标签，并在`href`属性中指定相应的锚点。例如：

<a href="#section1">跳转到第一节</a>
<a href="#section2">跳转到第二节</a>
<a href="#section3">跳转到第三节</a>

...

<div id="section1">第一节内容</div>
<div id="section2">第二节内容</div>
<div id="section3">第三节内容</div>

当用户点击`<a>`标签时，页面会自动滚动到相应的锚点位置。