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;
})