vue-router：如何不`saveScrollPosition`

Question

In my case, I have used vue and vue-router . I have fould a problem that somewhat the saveScrollPostion property can not work well.

This is my codes:

router.js

export default router => {
"use strict"
router.map({
    //'/': {
    //    component: null
    //},
    '/blogs': {
        component: require('./views/ArticleListPage.vue'),
        subRoutes: {
            '/': {
                component: require('./components/ArticleList/ArticleListSection.vue'),
            },
            '/tag/:name': {
                component: require('./components/ArticleList/ArticleListSection.vue'),
                name: 'tag'
            },
            '/classification/:name': {
                component: require('./components/ArticleList/ArticleListSection.vue'),
                name: 'classification'
            }
        }
    },
    '/projects': {
        component: require('./views/ProjectPage.vue')
    },
    '/about': {
        component: require('./views/AboutPage.vue')
    },
    '/p/:id': {
        component: require('./views/ArticlePage.vue')
    },
    '*': {
        component: require('./views/NotFound.vue')
    }
});

router.beforeEach(()=>{

});

In index.js , there are two settings in the Router instance:

const router = new Router({
    history: true,
    saveScrollPosition: false
});

The problem is: if going to any of the /p/:id route and scrolling the page down, you will find the previous page also scrolled after going back.

I have read vue-router documentation, it says the saveScrollPostion

might not work as expected if your has transition effects.

When deleting the setting, or just changing the saveScrollPosition to false, the problem is still there.

I guess it is the router.map method I wrote that causes the wrong result.

I also wonder whether there is any bug in my project codes instead of the vue-router settings that leads to this problem.

Further more, I haven't written any transition settings between route transitions.

Thank all of you for answering my question.

Answer 1

try to watch for $route property of Vue, eg:

watch: {
    $route: function() {
        window.scrollTo(0,0);
    }
}