Skip to content
This repository has been archived by the owner on Feb 12, 2023. It is now read-only.
/ weex-vue-router Public archive

router for weex as you can use some feature of vue-router

Notifications You must be signed in to change notification settings

dongnaebi/weex-vue-router

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Demo

xiazhou-weex

Install

$ npm install weex-vue-router

Usage

<template>
    <div>
        <div @click="jump('/product/123')"><text>Jump</text></div>
    </div>
</template>
import weexVueRouter from 'weex-vue-router'
import routes from './native-router'//web-router and native-router need to be defined separately。
Vue.use(weexVueRouter,{routes,weex})

export default {
    methods:{
        jump(url) {
            this.$router.push(url)
        },
        getParams(){
            return this.$route.params
        }
    }
}

Construction options

//native-router.js
const domain='http://domain.com';
const routes = [{
    path:'/product/:id';
    component:domain+'/dist/product/detail.js';//js bundle address,must end with '.js'
    name:'product';
}];
export default routes;

Component injections

$router

  • push() -only surport string featrue, like /path/:foo/:bar
  • back()

$route

  • path
  • params
  • query
  • hash
  • fullpath
  • matched
  • name

原理(求翻译)

需编译成两套,web端使用vue-router做SPA架构,单独编译出一个js(demo中的dist/app.js)。

native端则对应.vue文件编译成js bundle(demo中app/pages目录下的文件编译后分别对应dist中的js文件)。

在组件中写跳转$this.router.push('/path/1'),web端用vue-router跳转。

native端接收到/path/1,对应自己定义的routes匹配出js bundle地址,并使用navigator.push()方法跳转

TODO

  • 分模块&更严谨的逻辑
  • 加单测
  • meta和别名

About

router for weex as you can use some feature of vue-router

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published