使用 Vuex 和 vue-router

Vue.js 也有較多周邊技術產品，如 Vuex 和 vue-router 等，這些庫也能夠在 Weex 中很好的工做。

咱們基於 Weex 和 Vue 開發了一個的完整項目 weex-hackernews ，在項目中使用了 Vuex 和 vue-router ，可以實現同一份代碼，在 iOS、Android、Web 下都能完整地工做。

使用 Vuex

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理工具庫，能夠利用 Vue.js 的細粒度數據響應機制來進行高效的狀態更新。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

因爲在 Vuex 自己就是平臺無關的，有較強的移植能力，徹底能夠在 Weex 中正常地使用 Vuex ，閱讀其官方文檔能夠了解詳細的使用方法。

Vuex 也集成到了其官方調試工具 devtools extension中，提供了諸如 time-travel 調試、狀態快照導入導出等高級調試功能。這些工具在 Web 平臺中能夠一如既往地工做。

使用 vue-router

vue-router 是專爲 Vue.js 開發的便於實現單頁應用的工具庫，可以以聲明式的方法編寫頁面的導航和跳轉信息。

因爲 Weex 的運行環境不僅是瀏覽器，一般是以移動端原生環境爲主，然而在 Android 和 iOS 中都沒有瀏覽器的 History API，也不存在 DOM，所以若是想在 Weex 環境中使用 vue-router ，有些功能受到了限制，使用時應該注意。

路由模式

vue-router 提供了三種運行模式：

• hash: 使用 URL hash 值來做路由。默認模式。
• history: 依賴 HTML5 History API 和服務器配置。查看 HTML5 History 模式。
• abstract: 支持全部 JavaScript 運行環境，如 Node.js 服務器端。

配置方法是在定義路由時，傳遞 mode 屬性：

new Router({ mode: 'abstract', // ... })

從三種模式的介紹中也能夠看出來，Weex 環境中只支持使用 abstract 模式。不過，vue-router 自身會對環境作校驗，若是發現沒有瀏覽器的 API，vue-router 會自動強制進入 abstract 模式，因此在使用時只要不寫 mode 配置便可。默認 vue-router 會在瀏覽器環境中使用 hash 模式，在移動端原生環境中使用 abstract 模式。

編程式導航

vue-router 中使用 <router-link> 建立導航連接，不過在其中使用了基於 DOM 事件的一些特性，在 Weex 原生環境中並不能很好的工做。在 Weex 中，你必須使用編程式導航來編寫頁面跳轉邏輯。

編程式導航其實就是經過主動調用 router 實例上的 push 方法實現跳轉。

使用 <router-link> 的代碼示例：

<!-- 只能在 Web 中使用，Native 環境不支持！ --> <template> <div> <router-link to="profile"> <text>Profile</text> </router-link> </div> </template>

在 Weex 中，須要寫成這個樣子：

<template> <div> <text @click="jump">Profile</text> </div> </template>   <script> import router from './path/to/router' export default { methods: { jump () { router.push( 'profile') } } } </script>