weex踩坑之旅第二弹 ~ 在weex中集成vue-router

接着第一弹讲，咱们已经搭建好一个属于本身的weex项目了，而后如何开发呢？因为以前项目中都是采用vue全家桶进行开发，路由使用vue-router插件，状态管理使用vuex，Ajax先后台交互使用axios，图标库使用font-awesome，组件库使用element-ui...可是这些插件能不能都在weex中集成呢？若是你也是一个web开发者，应该重点考虑这个问题，在浏览器中，咱们须要把这个 JS bundle 做为一段 <script> 载入网页，在客户端里，咱们把这段 JS bundle 载入本地，并经过 WeexSDK 直接执行。也就是说在native中，咱们的代码是要在native环境中运行。而在native中，是没有document,window等DOM以及BOM的，即全部的DOM,BOM框架都是不可使用的。好比jQuery相关组件，axios相关组件，element-ui等都不能在weex中引用。

vue-router是能够在weex中使用的。若是想开发具备导航功能的页面，能够考虑将vue-router继承到项目中

vue-router的集成

1. 安装vue-router

$ npm install vue-router --save

2. 建立路由组件页面

<template>
    <div class="one">
        <text>
            {{msg}}
        </text>
    </div>
</template>
<script>
    export default {
        data:()=>({
            msg:'this is one'
        })
    }
</script>

代码结构以下

3. 集成

在src目录建立router目录，用于存放路由相关信息，而后在router中新建index.js。进行路由的配置以及与Router的集成，如下是src/router/index.js的代码

import Router from 'vue-router'
//组件导入
import ViewOne from '../pages/one/index.vue'
import ViewTwo from '../pages/two/index.vue'
import ViewThree from '../pages/three/index.vue'
//将Vue-router继承到Vue中
Vue.use(Router);
//提供默认对外接口
export default new Router({
  // mode: 'abstract',
  routes: [
    { path: '/one', component: ViewOne },
    { path: '/two', component: ViewTwo },
    { path: '/three', component: ViewThree }
  ]
});

而后在entry.js中导入router的配置

import App from './App.vue'
//引入路由配置
import router from './router'
new Vue(Vue.util.extend({
    el:'#root',    
    //将vue集成到vue中
    router,
},App))

4. 路由编程

在App.vue中提供<router-view>指令，用于显示路由信息

<template>
    <div class='container'>
        <!-- 标题 -->
        <div class="panel titlePanel">
            <text class='title'>{{msg}}</text>
        </div>
        <!-- 导航区 -->
      <div class="panel">
          <text class='link' @click='linkTo("/one")'>one</text>
          <text class='link' @click='linkTo("/two")'>two</text>
          <text class='link' @click='linkTo("/three")'>three</text>
      </div>
      <!-- 视图区 -->
    <router-view></router-view>
    </div>
</template>
<script>
    export default{
        data(){
            return {
                msg:'你好，weex'
            }
        },
        methods:{
            linkTo(path){
                //点击后改变路由
                this.$router.push(path);
            }
        }
    }
</script>
<style>
.container {
    background-color:#f4f4f4;
}

.panel {
    flex-direction: row;
    height: 100px;
    border-bottom-width: 1px;
    justify-content: space-between;
}
.titlePanel {
    justify-content: center;
    background-color: #ededed;
}
.title {
    height: 100px;
    line-height: 100px;
}
.link{
    line-height: 100px;
    text-align: center;
    flex: 1
}
</style>

运行效果