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

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

方法一：在路由配置中使用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;})