pages

src/App.vue

 <template>
   <div id="app">
     <ul>
-      <li><router-link to="/">News</router-link></li>
+      <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">

src/store/index.js

@@ -23,7 +23,7 @@ const store = new Vuex.Store({
       })
     },
     FETCH_NEWS: ({ commit, state }) => {
-      const ids = getDisplayedIds(state).filter(id => !state.items.id)
+      const ids = getDisplayedIds(state).filter(id => !state.items[id])
       return fetchItems(ids).then(items => {
         commit('RECEIVE_ITEMS', { items })
       })
@@ -56,7 +56,7 @@ if (inBrowser) {
 }
 
 function getDisplayedIds (state) {
-  const page = state.route.params.page || 1
+  const page = Number(state.route.params.page) || 1
   const { storiesPerPage, topStoryIds } = state
   const start = (page - 1) * storiesPerPage
   const end = page * storiesPerPage

src/views/News.vue

 <template>
   <div>
     <h2>News</h2>
-    <ul>
+    <transition :name="transition">
+      <ul class="news-list" :key="$route.params.page">
         <li v-for="item in news" :key="item.id">
           {{ item.title }}
         </li>
       </ul>
+    </transition>
   </div>
 </template>
 
@@ -18,10 +20,23 @@ const fetchData = store => {
 
 export default {
   name: 'news',
+  data () {
+    return {
+      transition: 'slide-left'
+    }
+  },
   prefetch: fetchData,
   mounted () {
     fetchData(this.$store)
   },
+  watch: {
+    '$route' (to, from) {
+      this.$store.dispatch(`FETCH_NEWS`)
+      this.transition = to.params.page > from.params.page
+        ? 'slide-left'
+        : 'slide-right'
+    }
+  },
   computed: {
     news () {
       return this.$store.getters.news
@@ -29,3 +44,20 @@ export default {
   }
 }
 </script>
+
+<style>
+.news-list {
+  position: absolute;
+  transition: all .5s cubic-bezier(.55,0,.1,1);
+}
+.slide-left-enter, .slide-right-leave-active {
+  opacity: 0;
+  -webkit-transform: translate(30px, 0);
+  transform: translate(30px, 0);
+}
+.slide-left-leave-active, .slide-right-enter {
+  opacity: 0;
+  -webkit-transform: translate(-30px, 0);
+  transform: translate(-30px, 0);
+}
+</style>