四十六、Vue中路由切换时，滚动行为在组件之间相互影响的解决办法

一、问题

  当我们在A组件中滚动到页面底部时，再通过路由到B组件，会发现显示的也是B组件的底部，而不是从头部开始显示？

二、原因

  组件之间的行为会相互影响。

三、解决办法

  在配置路由的地方加上如下代码，例如：
router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './pages/home/Home.vue'
import City from './pages/city/City.vue'
import Detail from './pages/detail/Detail.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/city',
      name: 'city',
      component: City
    },
    {
      path: '/detail/:id',
      name: 'detail',
      component: Detail
    }
  ],
  // 路由切换时，更新显示坐标
  scrollBehavior (to, from, savedPosition) {
    return { x:0, y:0}
  }
})