vue路由滚动

79 阅读1分钟

vue-router4以下的版本

import Vue from 'vue'
import Router from 'vue-router'
import PageIndex from '../views/PageIndex'
Vue.use(Router)

export default new Router({
    scrollBehavior(to, from, savedPosition) {
        // 1.return 期望滚动到哪个的位置
        if (savedPosition) {
            return savedPosition;
        } else {
            return {
                x: 0,
                y: 0
            };
        }
    },
    routes: [
        {
            path: '/',
            name: 'index',
            component: PageIndex,
            meta: {
                title: _lang.title
            }
        },
    ]
})

vue-router4+版本scrollBehavior为了使其返回更像JS API,将其返回的对象调整与ScrollToOptions类似:x改名为left,y改名为top。

import Vue from 'vue'
import Router from 'vue-router'
import PageIndex from '../views/PageIndex'
Vue.use(Router)

export default new Router({
    scrollBehavior(to, from, savedPosition) {
        // 1.return 期望滚动到哪个的位置
        if (savedPosition) {
            return savedPosition;
        } else {
            return {
                top: 0,
                left: 0
            };
        }
    },
    routes: [
        {
            path: '/',
            name: 'index',
            component: PageIndex,
            meta: {
                title: _lang.title
            }
        },
    ]
})