pagination

src/App.vue

@@ -2,18 +2,38 @@
   <div id="app">
     <div class="header">
       <img class="logo" src="./assets/logo.png">
+      <ul>
+        <li>
+          <router-link v-if="page > 1" :to="'/news/' + (page - 1)">prev</router-link>
+          <a v-else class="disabled">prev</a>
+        </li>
+        <li>
+          <router-link v-if="hasMore" :to="'/news/' + (page + 1)">more...</router-link>
+          <a v-else class="disabled">more...</a>
+        </li>
+        <li><router-link to="/about">About</router-link></li>
+      </ul>
     </div>
-    <ul>
-      <li><router-link to="/news/1">page 1</router-link></li>
-      <li><router-link to="/news/2">page 2</router-link></li>
-      <li><router-link to="/about">About</router-link></li>
-    </ul>
     <transition name="view" mode="out-in">
       <router-view class="view"></router-view>
     </transition>
   </div>
 </template>
 
+<script>
+export default {
+  computed: {
+    page () {
+      return Number(this.$route.params.page)
+    },
+    hasMore () {
+      const { storiesPerPage, topStoryIds } = this.$store.state
+      return this.page < Math.ceil(topStoryIds.length / storiesPerPage)
+    }
+  }
+}
+</script>
+
 <style>
 body {
   font-family: Roboto, Helvetica, sans-serif;
@@ -27,4 +47,10 @@ body {
 .view-enter, .view-leave-active {
   opacity: 0;
 }
+a {
+  color: #4fc08d;
+}
+a.disabled {
+  color: #999;
+}
 </style>

src/views/News.vue

@@ -2,10 +2,12 @@
   <div>
     <h2>News</h2>
     <transition :name="transition">
-      <ul class="news-list" :key="$route.params.page">
-        <news-item v-for="item in news" :key="item.id" :item="item">
-        </news-item>
-      </ul>
+      <div class="news-list" :key="$route.params.page">
+        <transition-group tag="ul" name="item">
+          <news-item v-for="item in news" :key="item.id" :item="item">
+          </news-item>
+        </transition-group>
+      </div>
     </transition>
   </div>
 </template>
@@ -66,4 +68,16 @@ export default {
   -webkit-transform: translate(-30px, 0);
   transform: translate(-30px, 0);
 }
+.item-move, .item-enter-active, .item-leave-active {
+  transition: all .5s cubic-bezier(.55,0,.1,1);
+}
+.item-enter {
+  opacity: 0;
+  transform: translate(30px, 0);
+}
+.item-leave-active {
+  position: absolute;
+  opacity: 0;
+  transform: translate(30px, 0);
+}
 </style>