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>

运行效果