weex-evnt-vue-router

0.0.7 • Public • Published

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和别名

Package Sidebar

Install

npm i weex-evnt-vue-router

Weekly Downloads

1

Version

0.0.7

License

Apache-2.0

Unpacked Size

21.1 kB

Total Files

4

Last publish

Collaborators

  • fushun