美文网首页javaScriptvexxWeb前端之路
weex(vue-native) -- vue-router 路

weex(vue-native) -- vue-router 路

作者: 反者道之动001 | 来源:发表于2017-07-11 16:14 被阅读650次

    本章讲述了在weex下使用router(官方的脚手架并没有这个例子,然后文档是一笔带过[支持vue-router OR vuex])

    大概实现方式:在awesome-project下的App.js引入router,Foot作为App组件使用(模仿vue官方结构)调用单组件。


    废话少说,直接看步骤
    1. 【创建单组件】,在src里面创建my、home Vue单组件

    2. 【新建router文件管理单组件】, 在src里面新建一个router.js文件

    import VueRouter from 'vue-router'
    import Vue from 'vue'
    
    import Home from './home.vue'
    import My from './my.vue'
    
    Vue.use(VueRouter)
    
    let routes = [
        {path: '/', component: Home},
        {path: '/my', component: My}
    ]
    export default new VueRouter({
        routes: routes
    })
    
    

    3.【导入到weex】 在App.js引入vue-router并添加给Foot组件路由

    
    import router from './src/Router.js'
    
    foo.router = router
    

    number. 【好像没有了】

    效果:

    home Page my Page

    Tips:
    router-link 在weex里无效,需要编程式导航

    this.$router.push('/')
    

    下一章 Css样式 (weex的css只支持部分,inline-block、text-align等等都不支持)

    --END--

    相关文章

      网友评论

      本文标题:weex(vue-native) -- vue-router 路

      本文链接:https://www.haomeiwen.com/subject/gwrmhxtx.html