# router

**Repository Path**: maowei666666/router

## Basic Information

- **Project Name**: router
- **Description**: SPA，监听哈希变化
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: v1.0
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2018-10-17
- **Last Updated**: 2020-12-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# rx.router
![logo](https://leave_work_on_time.gitee.io/router/logo.png)

#### 项目介绍
SPA的路由控制，特点是没有UI框框的限制，每个路由的上可以自由控制自己的子路由，目前只支持在Vue环境下使用。

#### 架构
* 路径配置[path-to-regexp](https://www.npmjs.com/package/path-to-regexp/)
* `hashChange` 地址栏模块切换
* `pushState` js跳转、存储参数（history.state）
* `replaceState` 路径替换
* `Vue.mixin` 混入`created`
* `created` 中 `Vue.util.defineReactive(this,'$rxRouterInfo',new Info(this))` 扩展当前实例`this`
* `Vue.prototype.$rxRouter` 绑定到Vue原型链
* **路由无需声明子路由的组件，插件会在 `components` 上动态声明相应 `pagename` 的组件 ，注意其他组件声明不要和 `pagename` 冲突了**


#### 安装教程

无

#### 使用说明

* 标签引入 `dist/static/rx.router.js`

##### 初始化

 `Vue.prototype.$rxRouter.init(routes,congig)` 初始化，接收两个参数 `routes`，`config`

    必须在根组件引入之前初始化。

路径配置[path-to-regexp](https://www.npmjs.com/package/path-to-regexp/)
1. 路由节点(route)

  ```
    {
      children:[] //子页面
      others:[]   //目录下的子页面
      pagename: 'App',
      name: '首页',
      component: () =>import ( /* webpackChunkName: "home" */ './pages/home.vue'), //返回组件的promise
      [path]: "/",    //详细的路径配置在下面，不配置会在初始化时候生成
    }
    
  ```
  路由总线示例(routes)：

  ```
    {
      children:[{     
          children:[] 
          others:[] 
          pagename: 'App',
          name: '首页',
          component: () =>import ( /* webpackChunkName: "home" */ './pages/home.vue'),  
          [path]: "/",   
      }] 
      others:[{
          children:[] 
          others:[]
          pagename: 'App',
          name: '首页',
          component: () =>import ( /* webpackChunkName: "home" */ './pages/home.vue'),  
          [path]: "/",   
      }]
      pagename: 'App',
      name: '首页',
      component: () =>import ( /* webpackChunkName: "home" */ './pages/home.vue'),
      [path]: "/",
    }
    
  ```

  2. config

  ```
  Vue.prototype.$rxRouter.init(menus,{
    onBeforeChange(pagename){
      //路由切换之前的检查  
      //路由切换时触发函数
      //1.返回false阻止跳转,只要不返回false都允许跳转
      //2.可以返回Promise
      
    },
    onBeforeExit(){
      //退出系统(整个应用即将退出之前) 
      //必须返回 Promise
    },
  })

  ```

##### 路由控制

原型链下面扩展了$rxRouter，路由控制
* `goTo(pagename,params)` Function 路由跳转


组件实例扩展了$rxRouterInfo，页面的路由信息
* `children` Array 子路由的信息
* `pages` Array 加载的页面们
* `current` Object 路由节点对象
* `removePage(pagename)` Function 移除加载过的页面



##### demo示例：

```
export default {
  methods:{
    removePage(item){
      //移除一个pages
      //销毁组件
       this.$rxRouterInfo.removePage(item);
    }
  },
  created(){
    //显示时调用的方法
    this.onRouterShow = (params))=>{

    }
    //隐藏是调用的方法
    this.onRouterHide = (params))=>{

    }
  }
};

```

#### 其他

[快点我上车体验吧](https://leave_work_on_time.gitee.io/router/#/)



#### 参与贡献

1. Fork 本项目
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request


#### 码云特技

1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2. 码云官方博客 [blog.gitee.com](https://blog.gitee.com)
3. 你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解码云上的优秀开源项目
4. [GVP](https://gitee.com/gvp) 全称是码云最有价值开源项目，是码云综合评定出的优秀开源项目
5. 码云官方提供的使用手册 [http://git.mydoc.io/](http://git.mydoc.io/)
6. 码云封面人物是一档用来展示码云会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)