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
相关推荐
Baklib梅梅1 天前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby
南方以南_1 天前
Chrome开发者工具
前端·chrome
YiHanXii1 天前
this 输出题
前端·javascript·1024程序员节
楊无好1 天前
React中ref
前端·react.js
维他命Coco1 天前
js常见开发学习
javascript
程琬清君1 天前
vue3 confirm倒计时
前端·1024程序员节
麦麦大数据1 天前
F033 vue+neo4j图书智能问答+知识图谱推荐系统 |知识图谱+neo4j+vue+flask+mysql实现代码
vue.js·flask·nlp·neo4j·智能问答·图书·1024程序员节
歪歪1001 天前
在C#中详细介绍一下Visual Studio中如何使用数据可视化工具
开发语言·前端·c#·visual studio code·visual studio·1024程序员节
唔661 天前
flutter实现web端实现效果
前端·flutter
csj501 天前
前端基础之《React(2)—webpack简介-使用Babel》
前端·react