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

tyheist 发布于2019-08-21 18:25 / 1040人阅读

摘要：也就是说在中，我们的代码是要在环境中运行。而在中，是没有等以及的，即所有的框架都是不可以使用的。比如相关组件，相关组件，等都不能在中引用。是可以在中使用的。

接着第一弹讲，我们已经搭建好一个属于自己的weex项目了，然后如何开发呢？由于之前项目中都是采用vue全家桶进行开发，路由使用vue-router插件，状态管理使用vuex，Ajax前后台交互使用axios，图标库使用font-awesome，组件库使用element-ui...但是这些插件能不能都在weex中集成呢？如果你也是一个web开发者，应该重点考虑这个问题，在浏览器中，我们需要把这个 JS bundle 作为一段

代码结构如下

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中提供指令，用于显示路由信息

运行效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90451.html

最全的weex踩坑攻略-出自大量实践与沉淀

摘要：如果你对微应用感兴趣，也在开发着微信小程序，不妨来看看为了让你减少顾虑而准备的技术对比表格，是的，开发钉钉的微应用是如此的简单。访问这个链接阅读钉钉微应用与微信小程序技术对比表格。与内存管理由于运行在中，此与有较大差异。在自己的业务环境中使用，并开放给第三方isv，企业开发者使用，这是一篇有内涵有故事的文章。如果你对weex微应用感兴趣，也在开发着微信小程序，不妨来看看为了让你减少...

qc1iu 2019-08-20 17:42 评论0 收藏0
weex踩坑之旅第一弹 ~ 搭建具有入口文件的weex脚手架

摘要：要想用好必须对基础，体系，打包工具有较深的了解对，有了解。官方提供的脚手架不能指定入口文件，如果我们想要在项目中使用，没有入口文件将会变得比较复杂。那么，我们应该如何使得当前项目具有入口文件呢答案是只能修改文件。写在前面的话：注意！该文档是2017年年底的文章，那个时候weex还有很多问题，现在weex已经全面更新，文档也比较全。下面的讲解可能不太适应新的weex框架，后面我会再立...

jk_v1 2019-08-21 18:24 评论0 收藏0
Weex系列(3) —— 单页面还是多页面

目录 Weex系列(序) —— 总要知道原生的一点东东(iOS) Weex系列(序) —— 总要知道原生的一点东东(Android) Weex系列(1) —— Hello World项目 Weex系列(2) —— 页面跳转和通信 Weex系列(3) —— 单页面还是多页面 [Weex系列(4) —— 老生常谈的三端统一] [Weex系列(5) —— 封装原生组件和模块] [Weex系列(6) —...

monw3c 2019-08-26 13:25 评论0 收藏0