vue.js - Weex的页面跳转方案的选择

问题描述

问 题

准备使用 Weex 来做新的移动端项目，但是在页面跳转方面有些疑惑。现有以下几种方案：

• Android就一个Activity，页面跳转逻辑都通过 vue-router 来实现。

• 每个页面都是一个Activity，每个Activity加载各自的 bundle.js 文件，数据通过 storage 模块传输。

• 通过navigator模块实现页面跳转。

第一种呢，感觉用 vue-router 之后界面很生硬，效果不好。
第二种么，自己瞎想的，感觉交互会好点。
第三种，直接不会用，囧……好像打包的js文件必须是远程的吧？

不知道有没有好的解决方案让weex来优雅地实现页面跳转呢？大家都是用的什么来进行Weex页面跳转的呢？

解决方案

我用的是第三种：var params = {'url':nextUrl,'animated':'true'} 把nextUrl替换成你另外个js文件的地址就行了，不用远程，直接本地地址可以。

<template>
  <div class="div">
    <text class="text" onclick="onItemClick">click me! {{message}}</text>
  </div>
</template>
<script>
  var navigator = require('@weex-module/navigator')
  var nextUrl = 'http://dotwe.org/raw/dist/6cd1703a45d7b2752cf05303069ce881.js'
  module.exports ={
    data:{
      message:''
    },
    methods:{
      onItemClick:function(e){
        var params = {'url':nextUrl,'animated':'true'}
        navigator.push(params, function(e) {
          console.log('i am the callback.')
        });
      }
    }
  }
</script>
<style>
  .div {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 750;
    height: 90;
    padding-left:30;
    padding-right:30;
    border-bottom-width: 1;
    border-style: solid;
    border-color: #dddddd;
  }
  .text{
    width: 750;
    height: 90;
  }
</style>

这篇关于vue.js - Weex的页面跳转方案的选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！