Weex 使用 vue-router

vue-router 是專為 Vue.js 開發(fā)的便于實(shí)現(xiàn)單頁應(yīng)用的工具庫，能夠以聲明式的方法編寫頁面的導(dǎo)航和跳轉(zhuǎn)信息。

由于 Weex 的運(yùn)行環(huán)境不只是瀏覽器，通常是以移動(dòng)端原生環(huán)境為主，然而在 Android 和 iOS 中都沒有瀏覽器的 History API，也不存在 DOM，因此如果想在 Weex 環(huán)境中使用 vue-router ，有些功能受到了限制，使用時(shí)應(yīng)該注意。

路由模式

vue-router 提供了三種運(yùn)行模式：

• ?hash?: 使用 URL hash 值來作路由。默認(rèn)模式。
• ?history?: 依賴 HTML5 History API 和服務(wù)器配置。查看 HTML5 History 模式。
• ?abstract?: 支持所有 JavaScript 運(yùn)行環(huán)境，如 Node.js 服務(wù)器端。

配置方法是在定義路由時(shí)，傳遞 ?mode? 屬性：

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

從三種模式的介紹中也可以看出來，Weex 環(huán)境中只支持使用 abstract 模式。不過，vue-router 自身會(huì)對環(huán)境做校驗(yàn)，如果發(fā)現(xiàn)沒有瀏覽器的 API，vue-router 會(huì)自動(dòng)強(qiáng)制進(jìn)入 abstract 模式，所以在使用時(shí)只要不寫 ?mode? 配置即可。默認(rèn) vue-router 會(huì)在瀏覽器環(huán)境中使用 hash 模式，在移動(dòng)端原生環(huán)境中使用 abstract 模式。

編程式導(dǎo)航

vue-router 中使用 ?<router-link>? 創(chuàng)建導(dǎo)航鏈接，不過在其中使用了基于 DOM 事件的一些特性，在 Weex 原生環(huán)境中并不能很好的工作。在 Weex 中，你必須使用編程式導(dǎo)航來編寫頁面跳轉(zhuǎn)邏輯。

編程式導(dǎo)航其實(shí)就是通過主動(dòng)調(diào)用 router 實(shí)例上的 ?push? 方法實(shí)現(xiàn)跳轉(zhuǎn)。

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

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

在 Weex 中，需要寫成這個(gè)樣子：

<template>
  <div>
    <text @click="jump">Profile</text>
  </div>
</template>

<script>
  import router from './path/to/router'
  export default {
    methods: {
      jump () {
        router.push('profile')
      }
    }
  }
</script>