vue中router滚动行为scrollBehavior

效果：当切换tab时自动定位到指定高度

views/cityDetail.vue：

html 复制代码

<template>
  <div class="city-detail">{{$route.params.id}}</div>
</template>
<style>
.city-detail{
  height: 1500px;
  line-height: 500px;
  background-color: greenyellow;
  font-size: 100px;
  text-align: center;
}
</style>

App.vue：

html 复制代码

<template>
  <div id="app">
    <div class="sticky-header">头部导航栏（粘性布局）</div>
    <div class="box">vue router中的滚动行为</div>
    <div class="hot-cities">
      <h1>热门城市</h1>
      <div class="nav" id='nav'>
        <!-- <router-link tag='div' class="nav-link" active-class="active" :to="{path:'/cityDetail/1',hash:'#nav'}">城市1</router-link>
        <router-link tag='div' class="nav-link" active-class="active" :to="{path:'/cityDetail/2',hash:'#nav'}">城市2</router-link>
        <router-link tag='div' class="nav-link" active-class="active" :to="{path:'/cityDetail/3',hash:'#nav'}">城市3</router-link> -->
        <div v-for="(item,index) in cityList" :key="index" :class="['nav-link',{active:currentIndex===index}]" @click="handlePush(index)">{{item}}</div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  data() {
    return { cityList: ['城市1', '城市2', '城市3'], currentIndex: 0 }
  },
  methods: {
    handlePush(index) {
      this.currentIndex = index
      this.$router.push({ path: '/cityDetail/' + (index + 1), hash: '#nav' })
    }
  }
}
</script>
<style lang="less" scoped>
.sticky-header {
  position: sticky;
  top: 0;
  width: 100%;
  line-height: 44px;
  background-color: blue;
  color: #fff;
  text-align: center;
  z-index: 1;
}
.box {
  width: 100%;
  line-height: 700px;
  background-color: orange;
  color: #fff;
  font-size: 100px;
  text-align: center;
}
.hot-cities {
  text-align: center;
  > h1 {
    padding: 20px 0;
  }
  .nav {
    display: flex;
    border-top: 1px solid #000;
    .nav-link {
      display: flex;
      height: 50px;
      flex: 1 1 33.33%;
      justify-content: center;
      align-items: center;
    }
    .active {
      color: greenyellow;
      background-color: #000;
    }
  }
}
</style>

router/index.js：

js 复制代码

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import CityDetail from '@/views/CityDetail'
const routes = [
  {
    path: '/cityDetail/:id',
    name: 'cityDetail',
    component: CityDetail
  }
]

const router = new VueRouter({
  mode: 'history',
  routes,
  scrollBehavior(to, from, savedPosition) {
    console.log(to, from, savedPosition)
    if (savedPosition) {
      return savedPosition // 浏览器上的前进后退按钮记录的位置对象
    } else {
      const position = {}
      position.selector = to.hash
      if (to.hash === '#nav') position.offset = { y: 150 }
      return position
    }
  }
})

export default router