use vue-router

app.js

@@ -1,3 +1,6 @@
-import foo from './src/foo.vue'
-foo.el = '#root'
-export default new Vue(foo);
+import App from './src/app.vue';
+import router from './src/router';
+
+export default new Vue(Vue.util.extend({ el: '#root', router }, App));
+
+router.push('/foo');

src/app.vue

@@ -0,0 +1,40 @@
+<template>
+  <div @androidback="back">
+    <div class="nav">
+      <text class="nav-i" @click="jumpFoo">Foo</text>
+      <text class="nav-i" @click="jumpBar">Bar</text>
+    </div>
+    <router-view style="flex:1"></router-view>
+  </div>
+</template>
+
+<style>
+  .nav {
+    flex-direction: row;
+  }
+  .nav-i {
+    flex: 1;
+    color: #41B883;
+    font-size: 48px;
+    text-align: center;
+    border-width: 2px;
+    border-color: #abc;
+    border-style: solid;
+  }
+</style>
+
+<script>
+  export default {
+    methods: {
+      back: function() {
+        this.$router.back();
+      },
+      jumpFoo: function() {
+        this.$router.push('/foo');
+      },
+      jumpBar: function() {
+        this.$router.push('/bar/0');
+      },
+    }
+  }
+</script>

src/bar.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <text>Hello Bar {{barId}}</text>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        barId: this.$route.params.id,
+      };
+    }
+  }
+</script>

src/foo.vue

@@ -1,27 +1,77 @@
 <template>
-  <div class="wrapper" @click="update">
-    <image :src="logoUrl" class="logo"></image>
-    <text class="title">Hello {{target}}</text>
+  <div class="wrapper">
+    <div class="title">
+      <image class="logo" :src="logoUrl"></image>
+    </div>
+    <text class="title" @click="update">Hello {{target}}</text>
+    <list class="list border-s">
+      <cell v-for="item in list">
+        <div class="panel border-s" @click="jumpBar(item.id)">
+          <text class="text">Jump to Bar: {{item.id}}</text>
+        </div>
+      </cell>
+    </list>
   </div>
 </template>
 
-<style>
-  .wrapper { align-items: center; margin-top: 120px; }
-  .title { font-size: 48px; }
-  .logo { width: 360px; height: 82px; }
-</style>
-
 <script>
   export default {
-    data: {
-      logoUrl: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png',
-      target: 'World'
+    data() {
+      return {
+        logoUrl: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png',
+        target: 'World',
+        list: [{
+          id: 1,
+        }, {
+          id: 2,
+        }]
+      }
     },
     methods: {
-      update: function (e) {
+      update(e) {
         this.target = 'Weex'
-        console.log('target:', this.target)
-      }
-    }
+        // console.log('target:', this.target)
+      },
+      jumpBar(id) {
+        this.$router.push(`/bar/${id}`);
+      },
+    },
   }
 </script>
+
+<style>
+  .wrapper {
+    align-items: center;
+    margin-top: 120px;
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .title {
+    font-size: 48px;
+    text-align: center;
+    align-items: center;
+  }
+  .logo {
+    width: 360px;
+    height: 82px;
+  }
+  .border-s {
+    border-style: solid;
+    border-color: #333;
+  }
+  .list {
+    border-top-width: 1px;
+    flex: 1;
+  }
+  .panel {
+    flex: 1;
+    margin-top: 5px;
+    margin-bottom: 5px;
+    border-bottom-width: 1px;
+  }
+  .text {
+    font-size: 50px;
+    text-align: center;
+    color: #41B883;
+  }
+</style>

src/router.js

@@ -0,0 +1,14 @@
+// import Vue from 'vue';
+import Router from 'vue-router';
+import FooView from './foo.vue';
+import BarView from './bar.vue';
+
+Vue.use(Router);
+
+export default new Router({
+  // mode: 'abstract',
+  routes: [
+    { path: '/foo', component: FooView },
+    { path: '/bar/:id', component: BarView },
+  ],
+});