individual food view works.

src/components/Food.vue

@@ -1,6 +1,7 @@
 <template>
 	<div class="food">
 		<h1>{{header}}</h1>
+		<h2>{{barcode}}</h2>
 		<p>{{rank}}</p>
 		<p>{{category}}</p>
 	</div>
@@ -10,6 +11,7 @@
 import axios from 'axios';
 export default {
 	name: 'Food',
+	props: ['barcode'],
 	data () {
 		return {
 			header:"Food Name",
@@ -26,9 +28,11 @@ export default {
 	methods:{
 
 	  	getFoodInfo: function() {
-			axios.get('http://foodbank.develop.digitalmediauconn.org/api/food/barcode/038000311307').then((response)  =>  {
+			axios.get('http://foodbank.develop.digitalmediauconn.org/api/food/barcode/'+ this.barcode).then((response)  =>  {
 		        this.loading = false;
 		         this.header = response.data.data.name;
+		         this.category = response.data.data.category.name;
+		         this.rank = response.data.data.rank.name;
 		      }, (error)  =>  {
 		        this.loading = false;
 		      })

src/router/index.js

@@ -15,8 +15,9 @@ export default new Router({
       component: SearchForm
     },
      {
-      path: '/Food',
+      path: '/Food/:barcode',
       name: 'Food',
+      props:true,
       component: Food
     }   
   ]