什么是navigation？如下图:

在iOS，使用的控制是UINavigationController。我们可以看到Navigation的内容比较多，例如中间的标题、左侧的搜索图片、右侧的图片等。同样，Weex也提供了该组件，那就是wxc-navpage。

我们，可以看到 wxc-navpage不仅支持基础的样式，同样提供了 title、title-color、 left-item-title、left-item-color、right-item-src等等属性，这里可以参考 。

wxc-navpage内嵌子组件，即。但是，我们改造上面的片段代码是跑不起来的。因此我们需要安装weex-components：

$ npm install  weex-components

很可能一个应用需要多个页面，那么多个页面如何跳转呢？其实Weex的Demo就给出了很好的例子。例如，这里的代码如下：

上面的代码是我从Weex Demo中拔出来的。这一块也是经常被开发者问到的，就是跳转路径的问题。其实，仔细看上面的代码，我们只需要关注两个地方，一个是this.dir，另一个是var h5Base = './index.html?page=./'。
我们在created方法中获取到this.dir。this.dir 则是我们打包完成的js bundle的目录。h5Base则是web端的路径。它的基本形式是:

  http://127.0.0.1:8080/index.html?page=./dist/index.js

其中index.html则是web端运行的载体，page=./dist/index.js则是传入到weex init中的参数。我们一般在集成web时候，会写上如下代码：

var url = this.recommend[index].url;
var title = this.recommend[index].title;
var navigator = require('@weex-module/navigator');
     'url': this.baseURL + 'yywebview.js?weixin_title=' + title + '&weixin_url=' + url,
}
console.log('------',params.url);
navigator.push(params, function(e) {});

我们获取到this.baseUR，然后拼接路径。this.baseUR则是created方法中获取到不同端的路径前缀。这里，引入了navigator = require('@weex-module/navigator');组件，然后使用了push方法，将路由对象添加进了路由栈。如果我们需要回退到上一个视图，该如何呢？其实navigator api已经提供了该功能，那就是pop。具体可以参考 。

Weex提供了网络请求模块，那就是stream。简单的例子如下：

基本上stream.fetch方法的几个参数都很容易理解。如果需要POST、PUT、DELETE等。可以参考： https://github.com/alibaba/weex/blob/dev/examples/module/stream-demo.we 。

<template>
    <div class="wrapper">
        <web class="web" src="{{src}}" style="height:{{height}};" onpagestart="pagestart" onpagefinish="pagefinish" onerror="error"></web>
    </div>
<style>
    .text{
        font-size:26;
    }
    .web{
        flex:1;

其中src就是我们要打开的网页地址。onpagestart、onpagefinish、onerror几个事件很重要。比如在onpagefinish时去掉loading，onerror时给用户友好提示。 具体参考： 。