update example

yyx990803 · yyx990803 · commit 14bd496284df · 2015-08-13T15:06:59.000-04:00
diff --git a/example/app.vue b/example/app.vue
@@ -0,0 +1,37 @@
+<style>
+.view {
+  transition: all .5s ease;
+}
+.test-enter, .test-leave {
+  opacity: 0;
+  transform: translate3d(10px, 0, 0);
+}
+.v-link-active {
+  color: red;
+}
+[v-cloak] {
+  display: none;
+}
+</style>
+
+<template>
+  <div>
+    <p v-show="authenticating" style="color:red">Authenticating...</p>
+    <h1>App Header</h1>
+    <a v-link="/inbox/message/123">inbox</a>
+    <a v-link="/about">about</a>
+    <a v-link="/user/1234/profile/what">user</a>
+    <a v-link="/forbidden">forbidden</a>
+    <router-view class="view" v-transition="test" transition-mode="out-in"></router-view>
+  </div>
+</template>
+
+<script>
+module.exports = {
+  data: function () {
+    return {
+      authenticating: false
+    }
+  }
+}
+</script>
diff --git a/example/index.html b/example/index.html
@@ -4,32 +4,12 @@
     <meta charset="utf-8">
     <title></title>
     <style>
-      .view {
-        transition: all .5s ease;
-      }
-      .test-enter, .test-leave {
-        opacity: 0;
-        transform: translate3d(10px, 0, 0);
-      }
-      .v-link-active {
-        color: red;
-      }
-      [v-cloak] {
-        display: none;
-      }
+      
     </style>
   </head>
   <body>
 
-    <div id="app" v-cloak>
-      <p v-show="authenticating" style="color:red">Authenticating...</p>
-      <h1>App Header</h1>
-      <a v-link="/inbox/message/123">inbox</a>
-      <a v-link="/about">about</a>
-      <a v-link="/user/1234/profile/what">user</a>
-      <a v-link="/forbidden">forbidden</a>
-      <router-view class="view" v-transition="test" transition-mode="out-in"></router-view>
-    </div>
+    <div id="app"></div>
 
     <script src="http://localhost:8080/webpack-dev-server.js"></script>
     <script src="/example.build.js"></script>
diff --git a/example/index.js b/example/index.js
@@ -1,11 +1,10 @@
-// NOTE: this example is based on 0.12.2 in which the
-// `replace` option defaults to true.
-
+// warning: vue-router requires Vue 0.12.10+
 var Vue = require('vue')
 var VueRouter = require('../src')
 
 Vue.use(VueRouter)
 
+// create router
 var router = new VueRouter({
   history: true,
   saveScrollPosition: true
@@ -21,7 +20,10 @@ router.redirect({
 })
 
 // global before
-// you can perform async rejection here
+// 3 options:
+// 1. return a boolean
+// 2. return a Promise that resolves to a boolean
+// 3. call transition.next() or transition.abort()
 router.beforeEach(function (transition) {
   if (transition.to.path === '/forbidden') {
     router.app.authenticating = true
@@ -35,14 +37,8 @@ router.beforeEach(function (transition) {
   }
 })
 
-var App = Vue.extend({
-  data: function () {
-    return {
-      authenticating: false
-    }
-  }
-})
-
+// boostrap the app
+var App = Vue.extend(require('./app.vue'))
 router.start(App, '#app')
 
 // just for debugging
