美文网首页
Vue之中多个页面之间互相影响,怎么解决?

Vue之中多个页面之间互相影响,怎么解决?

作者: Yin先生 | 来源:发表于2019-02-20 18:32 被阅读0次

当我们在写Vue项目时经常会遇到这样一个问题:比如当我们点击进入详情页面时,然后退出之后再进入到其他的详情页面的时候会停留在上一个详情页面所在的位置。

解决方法:

只需要在配置路由的文件中加入下的的代码即可,每次做路由切换的时候让x和y轴的值都为0,即最顶部。

scrollBehavior (to, from, savedPosition) {
      return { x: 0, y: 0 }
    }

例如:

export default new Router({
    routes: [{
            path: '/',
            name: 'Home',
            component: Home
        },
        {
            path: '/city',
            name: 'City',
            component: City
        },
        {
            path: '/detail/:id',    // 动态路由
            name: 'Deteil',
            component: Detail
        }
    ],
    scrollBehavior (to, from, savedPosition) {
      return { x: 0, y: 0 }
    }
})

参考网址:https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html#%E5%BC%82%E6%AD%A5%E6%BB%9A%E5%8A%A8

相关文章

网友评论

      本文标题:Vue之中多个页面之间互相影响,怎么解决?

      本文链接:https://www.haomeiwen.com/subject/lifkyqtx.html