add scroll behavior example

yyx990803 · yyx990803 · commit 751de05b95ab · 2016-07-24T23:20:44.000-04:00
diff --git a/examples/scroll-behavior/app.js b/examples/scroll-behavior/app.js
@@ -0,0 +1,49 @@
+import Vue from 'vue/dist/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>' }
+
+// scrollBehavior:
+// - only available in html5 history mode
+// - defaults to false
+// - if set to true, remembers and restores scroll position on popstate
+// - or use a function to conditionally return a position
+const scrollBehavior = (to, from, isPopState) => {
+  if (!isPopState || to.matched.some(m => m.meta.scrollToTop)) {
+    // explicitly control scroll behavior
+    // scroll to top on new navigations or routes that requires scrolling to top
+    return { x: 0, y: 0 }
+  }
+  // for popstate navigations, use saved position
+  return true
+}
+
+const router = new VueRouter({
+  mode: 'history',
+  base: __dirname,
+  scrollBehavior,
+  routes: [
+    { path: '/', component: Home, meta: { scrollToTop: true } },
+    { path: '/foo', component: Foo },
+    { path: '/bar', component: Bar }
+  ]
+})
+
+const app = new Vue({
+  router,
+  template: `
+    <div id="app">
+      <h1>Basic</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>
+      </ul>
+      <router-view class="view"></router-view>
+    </div>
+  `
+}).$mount('#app')
diff --git a/examples/scroll-behavior/index.html b/examples/scroll-behavior/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<style>
+.view {
+  border: 1px solid red;
+  height: 1000px;
+}
+</style>
+<a href="/">Examples index</a>
+<div id="app"></div>
+<script src="/__build__/shared.js"></script>
+<script src="/__build__/scroll-behavior.js"></script>
diff --git a/src/history/html5.js b/src/history/html5.js
@@ -24,7 +24,7 @@ export class HTML5History extends History {
       const current = this.current
       this.transitionTo(this.getLocation(), next => {
         if (expectScroll) {
-          this.handleScroll(current, next)
+          this.handleScroll(next, current, true)
         }
       })
     })
@@ -39,24 +39,26 @@ export class HTML5History extends History {
   }
 
   push (location: RawLocation) {
+    const current = this.current
     super.push(location, route => {
-      const url = cleanPath(this.base + route.fullPath)
-      pushState(url)
+      pushState(cleanPath(this.base + route.fullPath))
+      this.handleScroll(route, current, false)
     })
   }
 
   replace (location: RawLocation) {
+    const current = this.current
     super.replace(location, route => {
-      const url = cleanPath(this.base + route.fullPath)
-      replaceState(url)
+      replaceState(cleanPath(this.base + route.fullPath))
+      this.handleScroll(route, current, false)
     })
   }
 
   getLocation (): string {
     return getLocation(this.base)
   }
 
-  handleScroll (from: Route, to: Route) {
+  handleScroll (to: Route, from: Route, isPop: boolean) {
     const router = this.router
     if (!router.app) {
       return
@@ -67,7 +69,7 @@ export class HTML5History extends History {
     if (typeof behavior === 'boolean') {
       shouldScroll = behavior
     } else if (typeof behavior === 'function') {
-      shouldScroll = behavior(from, to)
+      shouldScroll = behavior(to, from, isPop)
     }
 
     if (!shouldScroll) {
