❤
npm
Sign UpSign In

vue-router-tiny

1.1.5 • Public • Published

vue-router-tiny

A router for Vue.js

重写vue的router，使用Director作为底层框架。

去除vue-router原生bug：

  • HTML5模式下，访问两次同样的地址，记录两次访问
  • 配置/example/:id ,/example/1 跳转到/example/2 时不会重新渲染。

支持函数处理式的url跳转

  • 支持url跳转进行函数处理
  • 对url跳转添加了before,on,leave事件

原生vue实例

  • 传递Vue实例参数，可以配合vuex使用。
  • url事件中，this.vue可访问root vue。

Install

npm install

npm install vue-router-tiny

Download

git clone https://github.com/vvpvvp/vue-router

option

  • history: 是否为html5模式
  • rootUrl: 为所有的url都添加root，全局添加前缀url
  • defaultUrl: 默认的url，当访问的地址没有route配置时，自动跳转。
  • before: 所有的url跳转之前执行，返回false则停止跳转。

Use

main.html

<!DOCTYPE html>
<html>
 
<head>
    <title>demo</title>
</head>
 
<body>
    <div id="body">
        <router-view></router-view>
    </div>
</body>
 
</html>
 

js/router.js

import Router from '../plugin/vue-router';
import create from '../../components/create.vue';
import main from '../../components/main.vue';
import welcome from '../../components/welcome.vue';
 
var routes = {
    '/': {
        component: main,
        subRoutes: {
            '/create1/:id': {
                name: 'create1',
                component: create
            },
            '/create2/:id': {
                name: 'create2',
                before:function(){
                    console.log("welcome before");
                    // return false;//会让页面无法跳转/welcome
                },
                on:function(){
                    console.log("welcome on");
                },
                leave:function(){
                    console.log("welcome leave");
                },
                component: create,
                subRoutes:{
                    "/:title":function(param){
                        console.log(param.title);
                        console.log(param.id);
                    }
                }
            },
            '/welcome': {
                component: function(resolve){
                    require(["../../components/welcome.vue"],resolve);
                }
            },
            "/alert":function(){
                console.log("alert");
            },
            "/alert2":{
                on:function(){
                    $("#mate").addClass("show");
                },
                leave:function(){
                    $("#mate").removeClass("show");
                }
            }
        }
    }
};
 
let VueParam = {
    el: '#body'
};
 
Vue.use(Router);
var router = new Router({
    history:true,
    rootUrl:"/root",
    defaultUrl:"/root"
});
 
 
router.map(routes);
router.start(VueParam);
 
export default router;
 

注意：当配置了rootUrl时，无需将rootUrl添加至v-link中，包括调用go方法也无需添加。

components/menu.vue

<template>
<div class="menu">
    <ul class="menuList">
        <li><a v-link.literal="/welcome">welcome</a></li>
        <li><a v-link="{name:'create1',params:{id:b},query:{query:1}}">create1{{a}}</a></li>
        <li><a v-link="{name:'create1',params:{id:b},query:{query:1}}">create1{{b}}</a></li>
        <li><a v-link="{name:'create2',params:{id:a},query:{query:1}}">create2</a></li>
        <li><a v-link.literal="/alert">alert</a></li>
    </ul>
</div>
</template>
 

components/create.vue

<template>
<div>
    <button @click="go" class="button">welcome</button>
</div>
</template>
<script type="text/javascript">
import Router from '../js/router';
export default {
    data() {
        return {};
    },
    methods:{
    	go(){
            Router.go("/welcome");
    	}
    }
}
</script> 
 

Dependences

Readme

Keywords

Package Sidebar

Install

npm i vue-router-tiny

Repository

github.com/vvpvvp/vue-router

Homepage

github.com/vvpvvp/vue-router#readme

Weekly Downloads

0

Version

1.1.5

License

The MIT License

Last publish

Collaborators

  • vvpvvp
Try on RunKit
Report malware