vue-router跳转滚动的问题(scrollBehavior

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。这个功能只在支持 history.pushState 的浏览器中可用。

1. 最简单的方法：scrollBehavior

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const Home = { template: '<div>home</div>' }
const Foo = { template: '<div>foo</div>' }
const Bar = {
  template: `
    <div>
      bar
      <div style="height:500px"></div>
      <p id="anchor">Anchor</p>
    </div>
  `
}
const scrollBehavior = (to, from, savedPosition) => {
  if (savedPosition) {//返回之前的原位置
    // savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
    return savedPosition
  } else {
    const position = {}
    if (to.hash) {//如果路径中有哈希值，就采用锚点定位
      position.selector = to.hash
    }
    if (to.matched.some(m => m.meta.scrollToTop)) {//如果路由元信息中存在参数，对参数做进一步判断（此示例代表滚动到顶部）
      position.x = 0
      position.y = 0
    }
   //如果返回一个 falsy (假的值)，或者是一个空对象，那么不会发生滚动。
    return position
  }
}

const router = new VueRouter({
  mode: 'history',
  base: __dirname,
  scrollBehavior,
  routes: [
    { path: '/', component: Home, meta: { scrollToTop: true }},
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar, meta: { scrollToTop: true }}
  ]
})

new Vue({
  router,
  template: `
    <div id="app">
      <h1>Scroll Behavior</h1>
      <ul>
        <li><router-link to="/">/</router-link></li>
        <li><router-link to="/foo">/foo</router-link></li>
        <li><router-link to="/bar">/bar</router-link></li>
        <li><router-link to="/bar#anchor">/bar#anchor</router-link></li>
      </ul>
      <router-view class="view"></router-view>
    </div>
  `
}).$mount('#app')

跳转回原来页面的位置，需要记住之前的位置。

1.路由跳转后用keep-alive记住状态 返回上次滚动的位置
keep-alive 会缓存当前的视图,配合路由元信息meta来做判断，用v-if显示不同的

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"> </router-view>
</keep-alive>
<router-view v-if="$route.meta.keepAlive"> </router-view>
-------------------------------------------------------------------------------
routes=[
  {path:'/home',component:Home,meta:{keepAlive:true}},
  {path:'/login',component:Login,meta:{keepAlive:false}}
]

2.sessionStorage记录位置
3.用vuex纪录位置