vue跳转到顶部_vue项目页面切换到默认显示顶部

c0761417b1099280d98685ccf4fb149d.png

​页面切换,默认显示顶部是一个在移动端很常见的功能。整理了三个现实方法如下:

方法一:在路由配置中使用scrollBehavior

使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。

vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。

在路由配置中使用scrollBehavior

 scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } }

如下例子, 使得每次进入页面都在页面顶部。

import Vue from 'vue'import Router from 'vue-router'import {wechatAuth,wechatOauth} from '@/utils/auth.js'import store from '@/store'Vue.use(Router)const routes = { mode: 'hash', routes: [ { path: '/', redirect: '/introduce' }, { path: '/introduce', name:'introduce', component: () => import('@/pages/introduce') }, { path: '/register', component: () => import('@/pages/register') }, /* { path: '/auth', component: () => import('@/pages/auth') }, */ { path: '/businessCard', component: () => import('@/pages/businessCard') }, { path: '/category', component: () => import('@/pages/category') }, { path: '/index', name:'index', component: () => import('@/pages/index') }, { path: '/orderList', name:'orderList', component: () => import('@/pages/orderList') }, { path: '/orderDetail', name:'orderDetail', component: () => import('@/pages/orderDetail') }, { path: '/acceptOrder', name:'acceptOrder', component: () => import('@/pages/acceptOrder') }, { path: '/feedBackDetail', name:'feedBackDetail', component: () => import('@/pages/feedBackDetail') }, ], scrollBehavior (to, from, savedPosition) { if (savedPosition) { return savedPosition } else { return { x: 0, y: 0 } } }}const route = new Router( routes)route.beforeEach((to, from, next) => { //获取当前页面链接进入路由签名 let link = route.resolve({ path: window.location.href }) //判断有没有code if(link.href.includes('/?code')){ let {code} = link.route.query let uri = to.fullPath wechatOauth(code,uri) }else{ //没有code再进入判断有没有用户资料 if(store.state.userInfo.userId === null){ //用户数据初始化请求 store.dispatch('getUserData').then(res => { //这里是已授权 //已授权进入正常的判断跳转流程 //获取用户id及绑定手机号码 let {userId,regTel} = res if(userId == -1){ //判断用户是否关注了公众号 next('/introduce') }else{ //判断有没有绑定手机号码 if(regTel == ''){ next('/register') }else{ //这里是请求到用户资料进入的正常流程 next() } } }).catch(err => { //这里是未授权 //未授权就请求微信接口进行授权 wechatAuth(to.fullPath) }) }else{ //这里是没有问题进入的正常流程 next() } }})export default route

方法二:vue里面写法如下,至于updated生命周期里面

 updated() { window.scroll(0, 0); }

方法三:router拦截控制

//路由跳转后,页面回到顶部router.afterEach(() => { document.body.scrollTop = 0; document.documentElement.scrollTop = 0;})
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值