资讯专栏INFORMATION COLUMN

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

tyheist / 989人阅读

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

接着第一弹讲,我们已经搭建好一个属于自己的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 评论0 收藏0
  • weex踩坑之旅第一弹 ~ 搭建具有入口文件的weex脚手架

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

    jk_v1 评论0 收藏0
  • Weex系列(3) —— 单页面还是多页面

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

    monw3c 评论0 收藏0

发表评论

0条评论

tyheist

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<