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
相关推荐
Sheldon一蓑烟雨任平生5 分钟前
Vue3 表单输入绑定
vue.js·vue3·v-model·vue3 表单输入绑定·表单输入绑定·input和change区别·vue3 双向数据绑定
浪里行舟24 分钟前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1231 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚1 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院1 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js
qq7798233401 小时前
React组件完全指南
前端·javascript·react.js
EndingCoder1 小时前
MongoDB基础与Mongoose ODM
服务器·javascript·数据库·mongodb·中间件·node.js
qq7798233402 小时前
React Hooks完全指南
前端·javascript·react.js
Moment2 小时前
性能狂飙!Next.js 16 重磅发布:Turbopack 稳定、编译提速 10 倍!🚀🚀🚀
前端·javascript·后端
软件技术NINI2 小时前
html css js网页制作成品——HTML+CSS仙台有树电视剧网页设计(5页)附源码
javascript·css·html