簡介

vue-router是vue.js提供的路由外掛。
這裡主要是用來支援頁面跳轉。

操作

新增檔案及其程式碼

建立路由

//src/router.js
import Router from 'vue-router'
import CounterView from './views/Counter.vue'
import CounterSView from './views/CounterStore.vue'
import Hello from './views/Hello.vue'

Vue.use(Router)
export default new Router({
  // mode: 'abstract'
 
,
  routes: [
    { path: '/counter', component: CounterView },
    { path: '/counters', component: CounterSView },
    { path: '/hello', component: Hello },
    { path: '/', redirect: '/hello' }
  ]
})

將路由插入vue

//src/entry.js
var vm = new Vue(Vue.util.extend(
    { el: '#root',
    store,
    router,//<----
 

    }, App))

//src/App.vue
<template>
  <div @androidback="back">
    <p>
        <router-link to="/bar">Go to Bar</router-link>
        <router-link to="/counter">counter</router-link>
        <router-link to="/hello">hello</router-link>
    </p>
 

    <router-view style="flex:1"></router-view>
  </div>
</template>

<script>
export default {
    methods: {
        back: function () {
            this.$router.back()
        }
    }
}
</script>

此時執行瀏覽器可以看到路由效果。但是native時不能用，weex文件中提到native不支援有兩點：

1. ul、li等標籤。
2. vue-router不能支援導航連結，只支援程式設計式導航

so，修改如下

//src/App.vue
<template>
  <div @androidback="back">
    <list class="list">
        <cell class="cell" @click="jump('/hello')">
            <text>hello<text>
        </cell>
        <cell class="cell" @click="jump('/')">
            <text>/<text>
        </cell>
        <cell class="cell" @click="jump('/counter')">
            <text>counter<text>
        </cell>
    </list>
    <router-view style="flex:1"></router-view>
  </div>
</template>

//serc/mixins/index.js
export default {
  methods: {
    jump (to) {
        console.log('to='+to);
      if (this.$router) {
        this.$router.push(to)
      }
    }
  }
}

import mixins from './mixins'
//src/entry.js
Vue.mixin(mixins)

Vue.mixin是Vue的混合組建。上面使用全域性註冊混合物件。 注意使用！ 一旦使用全域性混合物件，將會影響到 所有 之後建立的 Vue 例項。使用恰當時，可以為自定義物件注入處理邏輯。
so，每一個vue的例項都有了jump方法。

瀏覽器執行正常，native依然失敗。原因未知，經過多次試驗，將jump放到router-view中呼叫則無問題。

修改程式碼如下：

//src/App.vue
<template>
  <div @androidback="back">
    <router-view style="flex:1"></router-view>
  </div>
</template>

//src/views/Helle.vue
<div class="wrapper" @click="jump('/counter')">

//src/views/Counter.vue
<button @click="jump('/hello')">Increment async</button>

native可實現兩個頁面互相跳轉。至於原因，初學還未知，以後學到了回來補上。

結構目錄也發生了變化。將原來components=>views下
views下放頁面。
components下放元件。
api下放非同步回撥方法，比如http請求。

至此大體的框架已經有了，之後還會持續修改。比如有部落格說用weex不建議用vue-router做頁面跳轉，建議使用多頁面做跳轉。

程式碼參考