views/cityDetail.vue:
<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:
<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:
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
效果:
当切换tab时自动定位到指定高度