Using Vuex and vue-router#
NOTE: Weex is using native navigator to manage instance pages, the context of them are isolated. That means, Both Vuex and vue-router can only effect the single page, they can’t share state between different pages.
Vuex is a state management pattern + library for Vue.js applications. It’s also a library implementation tailored specifically for Vue.js to take advantage of its granular reactivity system for efficient updates. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.
As a kind of state management library, Vuex is platform-independent, It also can be used in Weex. It also integrates with Vue’s official devtools extension to provide advanced features on web platform, such as zero-config time-travel debugging and state snapshot export / import. (web platform only)
Creating a Single-page Application with Vue.js + vue-router is dead simple. With Vue.js, you are already composing our application with components. When adding vue-router to the mix, all you need to do is map your components to the routes and let vue-router know where to render them.
However, there are many differences between web and Android or iOS, some features of vue-router are limited in Weex.
vue-router provides three routing modes:
hash: uses the URL hash for routing. Works in all Vue-supported browsers, including those that do not support HTML5 History API. (default)
history: requires HTML5 History API and server config. See HTML5 History Mode.
You can pass the
mode parameter when creating a router:
hash mode and
history mode are only available on the web, and have no effect in Weex. In other words, you can only use
abstract mode in Android and iOS. However, vue-router will automatically be forced into
abstract mode if no browser API is present. So, just don’t set the
mode option, or set it to
<router-link> to create a navigation link, but in which, some features are based on the DOM events and it doesn’t work well in the native environment. In Weex, you must use the Programmatic Navigation to manage the router.
Here is a basic example using
<!-- Can only be used on the web, it takes no effects on Android or iOS! -->
For native platforms, you have to use the