vue router

.meteor/packages

@@ -22,3 +22,5 @@ akryum:vue-component    # Vue-CLI template to publish components
 
 meteortesting:mocha               # A package for writing and running your meteor app and package tests with mocha
 johanbrook:publication-collector  # Test a Meteor publication by collecting its output
+#kadira:flow-router
+akryum:vue-router2

.meteor/versions

@@ -1,6 +1,8 @@
+akryum:npm-check@0.1.2
 akryum:vue-component@0.15.2
 akryum:vue-component-dev-client@0.4.7
 akryum:vue-component-dev-server@0.1.4
+akryum:vue-router2@0.2.3
 allow-deny@1.1.0
 autoupdate@1.6.0
 babel-compiler@7.5.3

client/main.js

@@ -1,12 +1,20 @@
 import Vue from 'vue'
+import { RouterFactory, nativeScrollBehavior } from 'meteor/akryum:vue-router2'
 
 import '../imports/ui/plugins'
+import './routes'
 
 import App from '../imports/ui/App.vue'
 
 Meteor.startup(() => {
+  const routerFactory = new RouterFactory({
+    mode: 'history',
+    scrollBehavior: nativeScrollBehavior,
+  })
+  const router = routerFactory.create()
   new Vue({
     el: '#app',
+    router: router,
     ...App,
   })
 })

client/routes.js

@@ -0,0 +1,21 @@
+// Import the router
+import { RouterFactory } from 'meteor/akryum:vue-router2'
+
+// Components
+import Home from '/imports/ui/views/Home'
+import Page from '/imports/ui/views/Page.vue'
+
+RouterFactory.configure(factory => {
+    factory.addRoutes([
+        {
+            path: '/',
+            name: 'home',
+            component: Home,
+        },
+        {
+            path: '/page',
+            name: 'page',
+            component: Page,
+        },
+    ])
+})

imports/ui/App.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <h1>Welcome to Meteor!</h1>
     <hello/>
     <info/>
+    <router-view></router-view>
   </div>
 </template>
 

imports/ui/components/Hello.vue

@@ -1,6 +1,8 @@
 <template>
   <div>
     <button @click="increment">Click Me</button>
+    <button @click="routeHandler">router page</button>
+    <button @click="goback">go back</button>
     <p>You've pressed the button {{counter}} times.</p>
   </div>
 </template>
@@ -15,6 +17,12 @@ export default {
   methods: {
     increment() {
       this.counter += 1
+    },
+    routeHandler(){
+      this.$router.push("/page")
+    },
+    goback(){
+      this.$router.go(-1)
     }
   },
 }

imports/ui/views/Home.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    home
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Home"
+}
+</script>
+
+<style scoped>
+
+</style>

imports/ui/views/Page.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    page
+  </div>
+</template>
+
+<script>
+export default {
+name: "Page"
+}
+</script>
+
+<style scoped>
+
+</style>

package.json

@@ -12,7 +12,8 @@
     "@babel/runtime": "^7.11.2",
     "meteor-node-stubs": "^1.0.1",
     "vue": "^2.6.12",
-    "vue-meteor-tracker": "^2.0.0-beta.5"
+    "vue-meteor-tracker": "^2.0.0-beta.5",
+    "vue-router": "^3.0.0"
   },
   "meteor": {
     "mainModule": {
@@ -20,5 +21,6 @@
       "server": "server/main.js"
     },
     "testModule": "tests/main.js"
-  }
+  },
+  "devDependencies": {}
 }