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