vue中router-link配合router-view实现页面切换控制滚动条位置变化-案例

页面切换不改变浏览器滚动条位置

路由表配置router

{
    path: "/introduce",
    name: "introduce",
    meta: { title: "路由滚动条" },
    component: () => import("../views/introduce.vue"),
    children: [
      {
        path: '/introduce/property',
        meta: {
          keepAlive: true,//是否控制滚动条位置
          scrollTop: 400,//滚动条位置
        },
        component: () => import("../components/introduce/property.vue")
      },
      {
        path: '/introduce/energy',
        meta: {
          keepAlive: true,
          scrollTop: 400,
        },
        component: () => import("../components/introduce/energy.vue")
      },
      {
        path: '/introduce/pay',
        meta: {
          keepAlive: true,
          scrollTop: 400,
        },
        component: () => import("../components/introduce/pay.vue")
      },
      {
        path: '/introduce/vehicle',
        meta: {
          keepAlive: true,
          scrollTop: 400,
        },
        component: () => import("../components/introduce/vehicle.vue")
      },
      
    ]
  },

app.vue中监听

watch:{
    // 控制滚动条位置
    '$route':function(to,from){
      console.log(to,from)
      if(to.meta.keepAlive){
        document.body.scrollTop = to.meta.scrollTop
        document.documentElement.scrollTop = to.meta.scrollTop
        // document.documentElement.scrollTop = 400
      }
    }
  },

具体页面中实现

<div class="layout">
	<div class="sider">
	  <router-link to="/introduce/property">企业(物业)管理平台</router-link>
	  <router-link to="/introduce/energy">能耗管理平台</router-link>
	  <router-link to="/introduce/pay">缴费管理平台</router-link>
	  <router-link to="/introduce/vehicle">智慧停车管理平台</router-link>
	  <router-link to="/introduce/visual">可视化平台</router-link>
	  <router-link to="/introduce/security">智能安防系统</router-link>
	</div>
	<div class="content">
	  <router-view></router-view>
	</div>
</div>