vue項目頁面切換到默認顯示頂部

頁面切換到默認顯示頂部

 

方法一

使用前端路由，當切換到新路由時，想要頁面滾到頂部，或者是保持原先的滾動位置，就像重新加載頁面那樣。

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

 

 

https://www.cnblogs.com/sophie_wang/p/7880261.html

https://blog.csdn.net/u013144287/article/details/78985551

https://blog.csdn.net/csl125/article/details/83996314