javascript - vue-router:如何不使用 `saveScrollPosition`

Question

在我的例子中，我使用了 vue 和 vue-router。我遇到了一个问题，即 saveScrollPostion 属性可能不能正常工作。

这是我的代码:

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(()=>{

});

在index.js中，Router实例中有两个设置:

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

问题是:如果转到任何/p/:id 路由并向下滚动页面，您会发现返回后上一页也滚动了.

我已阅读 vue-router文档，它说 saveScrollPostion

might not work as expected if your has transition effects.

删除设置，或者只是将saveScrollPosition改为false，问题依旧。

我猜是我写的router.map方法导致了错误的结果。

我也想知道是不是我的项目代码有什么bug而不是vue-router的设置导致了这个问题。

此外，我还没有在路由转换之间编写任何transition设置。

感谢大家回答我的问题。

Answer 1

尝试观察 Vue 的 $route 属性，例如:

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