Added an ActionBar to the 'router' demo

EddyVerbruggen · EddyVerbruggen · commit 1e6deccb364f · 2017-08-01T09:56:50.000+02:00
diff --git a/samples/app/app-with-list-view.js b/samples/app/app-with-list-view.js
@@ -1,4 +1,4 @@
-const Vue = require('nativescript-vue/dist/index')
+const Vue = require('../dist/index')
 const http = require('http')
 const Page = require('ui/page').Page
 const StackLayout = require('ui/layouts/stack-layout').StackLayout
diff --git a/samples/app/app-with-router.js b/samples/app/app-with-router.js
@@ -57,18 +57,29 @@ router.replace('/foo')
 new Vue({
     router,
 
+    data: {
+        pageTitle: 'Current route: /foo'
+    },
+
     template: `
-        <page>
+        <page ref="page">
+            <action-bar :title="pageTitle"></action-bar>
             <stack-layout>
-                <stack-layout orientation="horizontal">
-                    <button @tap="$router.replace('/foo')">Foo</button>
-                    <button @tap="$router.replace('/bar')">Bar</button>
+                <stack-layout orientation="horizontal" horizontalAlignment="center" class="m-b-20">
+                    <button @tap="changeRoute('/foo')" class="m-10">Foo</button>
+                    <button @tap="changeRoute('/bar')" class="m-10">Bar</button>
                 </stack-layout>
 
-                <label style="text-align: center">Current route: {{ $route.fullPath }}</label>
-
                 <router-view></router-view>
             </stack-layout>
         </page>
     `,
+
+    methods: {
+        changeRoute(to) {
+            this.pageTitle = 'Current route: ' + to
+            router.replace(to)
+        }
+    }
+
 }).$start()

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-const Vue = require('nativescript-vue/dist/index')`
	`1`	`+const Vue = require('../dist/index')`
`2`	`2`	`const http = require('http')`
`3`	`3`	`const Page = require('ui/page').Page`
`4`	`4`	`const StackLayout = require('ui/layouts/stack-layout').StackLayout`