diff --git a/README.md b/README.md
index a02d36b..be8a17c 100644
--- a/README.md
+++ b/README.md
@@ -105,6 +105,41 @@ export default {
```
+Or betterstill just hook into VueRouter afterEach Lifecycle, and negate the need to set the page on each component
+
+
+```js
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+import Dashboard from '@/Dashboard.vue';
+import About from '@/About.vue';
+
+Vue.use(VueRouter)
+
+const router = new VueRouter({
+ routes: [
+ {
+ path: '/dashboard',
+ name: 'Dashboard',
+ component: Dashboard
+ },
+ {
+ path: '/about',
+ name: 'about',
+ component: About
+ }
+ ]
+});
+
+router.afterEach((to) => {
+ //window.analytics.page(to.name) // if you prefer Name
+ window.analytics.page(to.fullPath)
+});
+
+export default router;
+```
+
## 🔍 Step 3: Identify Users
The `identify` method is how you tell Segment who the current user is. It includes a unique User ID and any optional traits you can pass on about them. You can read more about this in the [identify reference](https://segment.com/docs/sources/website/analytics.js/#identify?utm_source=github&utm_medium=click&utm_campaign=protos_vue).
diff --git a/src/components/About.vue b/src/components/About.vue
index cec60bc..b8141d1 100644
--- a/src/components/About.vue
+++ b/src/components/About.vue
@@ -9,10 +9,7 @@
diff --git a/src/components/Home.vue b/src/components/Home.vue
index 4ccac0f..2101330 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -7,9 +7,6 @@
diff --git a/src/router/index.js b/src/router/index.js
index afbd728..4359304 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -5,7 +5,7 @@ import About from '@/components/About'
Vue.use(Router)
-export default new Router({
+const router = new Router({
routes: [
{
path: '/',
@@ -19,3 +19,9 @@ export default new Router({
}
]
})
+
+router.afterEach((to) => {
+ window.analytics.page(to.fullPath)
+});
+
+export default router;