loading result items with route

src/components/Content/Item.vue

@@ -0,0 +1,63 @@
+<template>
+  <transition name="fade" appear>
+    <span v-if="!loaded">Loading...</span>
+    <article v-else class="item">
+      <header>
+        <h1>
+          {{ item.title }}
+        </h1>
+      </header>
+      <section v-html="item.tei" />
+    </article>
+  </transition>
+</template>
+
+<script>
+
+import { REST } from 'api/rest-axios'
+
+export default {
+  name: 'Item',
+  props: {
+    uuid: {
+      type: String,
+      required: true
+    }
+  },
+  data: () => ({
+    loaded: false,
+    item: {}
+  }),
+  watch: {
+    '$route' (to, from) {
+      console.log('item route change')
+      this.loadItem()
+    }
+  },
+  created () {
+    console.log('Item created', this.uuid)
+    this.loadItem()
+  },
+  updated () {
+    console.log('item updated', this.uuid)
+  },
+  methods: {
+    loadItem () {
+      this.loaded = false
+      REST.get(`/items/` + this.uuid, {})
+        .then(({ data }) => {
+          console.log('item REST: data', data)
+          this.item = data.content
+          this.loaded = true
+        })
+        .catch((error) => {
+          console.warn('Issue with item', error)
+          Promise.reject(error)
+        })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/Content/ResultItem.vue

@@ -29,12 +29,10 @@ export default {
   methods: {
     onclick () {
       console.log('clicked on result item', this.result)
-      // this.$router.push({
-      //   name:`article`,
-      //   params: { alias:this.alias },
-      //   query: { uuid: this.item.uuid }
-      //   // meta: { uuid:this.item.uuid },
-      // })
+      this.$router.push({
+        name: `item`,
+        params: { uuid: this.result.uuid }
+      })
     }
   }
 }

src/router/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 
 import Home from 'pages/Home'
+import Item from 'components/Content/Item'
 import Corpus from 'pages/Corpus'
 import Nominum from 'pages/Nominum'
 import NominumItem from 'components/Content/NominumItem'
@@ -18,6 +19,12 @@ const routes = [
     path: '/',
     component: Home
   },
+  {
+    name: 'item',
+    path: '/items/:uuid',
+    component: Item,
+    props: true
+  },
   {
     name: 'corpus',
     path: '/corpus',